Vue路由传参的几种方式

原创
2019/05/14 18:53
阅读数 291

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>

此方式相当于在地址栏拼参数

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
0 评论
0 收藏
0
分享
返回顶部
顶部