首页 > web前端 > Vue.js > 正文

vue.js如何带参数跳转

coldplay.xixi
发布: 2020-11-30 16:59:08
原创
3023 人浏览过

vue.js带参数跳转的方法:首先创建【readDetail.vue】且在【index.js】中注册路由;然后通过【router-link】进行跳转,或者通过【$router】方式跳转。

vue.js如何带参数跳转

本教程操作环境:windows10系统、vue2.5.2,本文适用于所有品牌的电脑。

【相关文章推荐:vue.js

vue.js带参数跳转的方法:

首先创建readDetail.vue 且在index.js中注册路由。

传递页面方式:

1.通过router-link进行跳转

  
     
登录后复制
  • path -> 是要跳转的路由路径,也可以是路由文件里面配置的 name 值,两者都可以进行路由导航

  • params -> 是要传送的参数,参数可以直接key:value形式传递

  • query -> 是通过 url 来传递参数的同样是key:value形式传递

2. $router方式跳转

this.$router.push({name:'路由命名',params:{参数名:参数值,参数名:参数值}})
 this.$router.push({  
            path: 'yourPath',   
            name: '要跳转的路径的 name,在 router 文件夹下的 index.js 文件内找',  
            params: {   
                key: 'key',   
                msgKey: this.msg  
            }  
            /*query: {  
                key: 'key',   
                msgKey: this.msg  
            }*/  
        })
登录后复制

接受方式

this.$route.params.参数名
this.$route.query.参数名
登录后复制

实验(包含两种方式):

传递页:

 
                
              -----------------------------------------------------------------------------------------export default {
    name: 'reads',
    data () {
      return {
        msg: 'msg test.'
      }
    },
登录后复制

接收页:

Num:{{ myIndex }}

{{ msg }}

-----------------------------------------------------------data () { return { msg: '', // 保存传递过来的index myIndex: '' }-----------------------------------------------------------mounted: function () { this.msg = this.$route.params.msgKeyOne this.myIndex = this.$route.params.msgKey console.log(this.myIndex) }
登录后复制

相关免费学习推荐:javascript(视频)

以上是vue.js如何带参数跳转的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!