Vue路由传参
Vue路由传参 基本可分为两种:params传参与query传参;params传参又可以分为url中显示参数和不显示参数两种方式;
params传参(url中显示参数)
//route.js内
{
path:'/news/:id',
component:newsDetail,
}
//组件跳转
<router-link to="/news/123">跳转到详情页面</router-link>
子路由通过 this.$route.params.num 的形式来获取父路由向子路由传递过来的参数
params传参(url中不显示参数)
//route.js内
{
path:'/news/',
name:'news',
component:news,
}
//组件跳转
<router-link :to="{name:'news',params:{id:666}}">跳转到详情页面</router-link>
使用Query实现路由传参
//route.js内
{
path:'/news/',
component:news,
}
//组件跳转
<router-link :to="{path:'/news',query:{id:123}}">跳转到详情页面</router-link>
此方式相当于在地址栏拼参数