Vue传参方式可以划分为params传参（参数隐藏在路径中）和query传参（参数在？后）俩种方式
1. 使用 router-link 标签跳转路由
要注意 to 和 :to 的不同： to 不带参数 ， :to 带参数
（1）使用params 传参
vue页面
<router-link :to="{name:'Test7',params:{tid:1,title:'hello test7'}}">测试7-路由</router-link>
要修改路由文件( router目录下的 js ) ,注意 ：
{
path: '/ts7/:tid/:title',
name: 'Test7',
component: () => import('../views/test7.vue')
}
注意：在路由的配置文件里给该路由后面拼接需要的参数（：参数）这步不要省略。否则params传参刷新页面的时候会丢失数据。
js中接收参数，注意：this.$route
init(){
// 接收 name params 的 参数
// 注意是 this.$route
this.tid = this.$route.params.tid;
this.title = this.$route.params.title;
}
（2）使用query 传参数
vue 页面
<router-link :to="{path:'/ts8',query:{tid:2,title:'welcome to test8'}}">测试8-路由</router-link>
不要改路由文件
js中接收参数
init(){
// path query 组合
this.tid = this.$route.query.tid;
this.title = this.$route.query.title;
}
2. 函数式路由传，不用router-link标签
关键语法： this.$router.push
vue 页面上写
<div>
<button @click="jump8">去测试8页面</button>
</div>
js 函数,query 传参的方式
jump8(){
//this.$router.push("/ts6"); // 不带参数
this.$router.push({
path:'/ts8',
query:{
tid:4,
title:'7页面过来访问'
}
});
// 带参数
}
点击按钮后就可以调到对应的vue路由页面。文章来源：https://www.toymoban.com/news/detail-831882.html
params传参的方式，要修改对应的路由js
jump7(){
//编程式路由 : this.$router.push
this.$router.push({
name:'Test7',
params:{
tid:3,
title:'8页面过来访问'
}
})
//
}文章来源地址https://www.toymoban.com/news/detail-831882.html
到了这里，关于Vue路由的传参的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
