vue路由之间传参的多种方式

路由组件传参

方式1：使用 $router.params

// 在路由中定义参数
const router = new VueRouter({
  routes: [
    { path: '/user/:id',  name: 'user', component: User }
  ]
})

// 页面a跳转的时候传参
<router-link to="{ path:'/user/123'}">
或者
<router-link to="{ name: 'user', params: { id: 123 }}">User</router-link>
或者
this.$router.push({path: '/user/123'})
或者
this.$router.push({ name: 'user', params: { id: 123 }})




// 在 user 页面中使用参数
<div>User {{ $route.params.id }}</div>
或者
this.$route.params.id

方式2: 使用props

文档： https://router.vuejs.org/zh/guide/essentials/passing-props.html

在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性

使用 props 将组件和路由解耦：

// 定义路由 props
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User, props: true },

    // 对于包含命名视图的路由，你必须分别为每个命名视图添加 `props` 选项：
    {
      path: '/user/:id',
      components: { default: User, sidebar: Sidebar },
      props: { default: true, sidebar: false }
    }
  ]
})

// 同方法1，在a页面跳转的时候传参
<router-link to="{ path:'/user/123'}">


// 在路由user组件中使用props接受参数
const User = {
  props: ['id'],
  template: '<div>User {{ id }}</div>'
}

这样你便可以在任何地方使用该组件，可以路由使用，也可以组件嵌套的时候使用，使得该组件更易于重用和测试。

方式3： 通过 vuex

虽然不太推荐，但是也可以通过vuex实现，有点杀鸡用牛刀

// 定义store
import Vuex from 'vuex'
import Vue  from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
    state:{
             id: ''
      },
      mutations:{
           setId(state ,  id) {
                   state.id = id            
             }
        }
})

// 在a页面设置
 this.$store.commit( 'setId' ，(123) )

// 在b页面取
this.$store.state.id 

方式4：使用本地存储，localstorage或者Session Storage

原理很简单，a页面存，b页面取，不推荐

推荐方式2，解耦更通用