vue路由传参按照传参方式可划分为params传参和query传参； params传参分为在url中显示和影藏参数两种方式
1 params传参（url地址栏显示参数）1.1 声明式 router-link通过router-link的to属性实现，该方法的参数可以是一个字符串；使用该方式时，需要子路由中提前配置好参数，如：
// 1 路由配置
{
path: 'content/:id',
name: 'Content',
component: Content,
},
// 2 页面跳转
<router-link :to="'content/123'">进入</router-link>
// 3 获取方式
this.$route.params.id // 输出123
使用该方式传参时，需要在路由中提前配置好参数， 如：
// 1 路由配置
{
path: 'content/:id',
name: 'Content',
component: Content,
},
// 2 页面触发js事件
linkTo() {
// 此处参数456可以通过动态变量替换
this.$router.push('content/456') ;
// 或
this.$router.push({path: 'content/456'}) ;
},
// 3 参数获取方式
this.$route.params.id // 输出456
url地址栏展示:
params传参url展示参数.png
2 params传参(url地址栏不显示参数)params(不显示传参)也可以分为声明式和编程式两种,与方式一不同的是通过name进行传参,实现跳转;
2.1 声明式router-link通过router-link组件的to属性实现
// 1 路由配置
{
path: 'content',
name: 'Content',
component: Content,
},
// 2 页面跳转
<router-link :to="{name: 'Content', params: {id: 123}}">进入</router-link>
// 3 参数获取
this.$route.params.id // 输出123
使用该方式传值时,需要在路由中提前配置好参数,不过不需要在使用":/id"等类似方式传递参数,具体如下:
// 1 路由配置
{
path: 'content',
name: 'Content',
component: Content,
}
// 2 js实现路由跳转
this.$router.push({
name: 'Content',
params: {
id: 123
}
})
// 3 参数获取
this.$route.params.id // 显示undefined
注意: 上述这种利用params不显示url传参的方式会导致在刷新页面的时候,传递的值会丢失;
3 query传参(显示参数)query传参(显示参数)也可分为声明式和编程式两种方式
3.1 声明式 router-link通过router-link组件的to属性实现,不过该方式传值的时候,需要子路由提前配置好路由别名(name属性),如
// 1 路由配置
{
path: 'content',
name: 'Content',
component: Content,
}
// 2 页面设置
<router-link :to="{name: 'Content', query: {id: 123}}">进入</router-link>
// 3 参数获取
this.$route.query.id // 输出 123
使用该方式传值的时候,需要路由提前配置好路由别名(name属性), 如:
// 1 路由配置
{
path: 'content',
name: 'Content',
component: Content,
}
// 2 js跳转
this.$router.push({
name: 'Content',
query: {
id: 123
}
})
// 3 参数获取
this.$route.query.id // 输出123
url地址栏展示:
query方式url展示.png
,
