Vue路由传参的几种方式

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>

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

转载于:https://my.oschina.net/ytyjm/blog/3049562