将 props 传递给 Vue-router 实例化的 Vue.js 组件

<router-view :some-value-to-pass="localValue"></router-view>

并在您的组件中添加道具：

props: {
      someValueToPass: String
    },

vue-router 将匹配组件中的 prop

---

遗憾的是，没有一个上一个解决方案实际上回答了这个问题，所以这里有一个来自 quora

基本上docs没有解释清楚的部分是

当 props 设置为 true 时，route.params 将被设置为组件 props。

因此，通过路由发送道具时您真正需要的是将其分配给 params 键 ex

this.$router.push({
    name: 'Home',
    params: {
        theme: 'dark'
    }
})

所以完整的例子是

// component
const User = {
  props: ['test'],
  template: '<div>User {{ test }}</div>'
}

// router
new VueRouter({
  routes: [
    { 
      path: '/user',
      component: User,
      name: 'user',
      props: true 
    }
  ]
})

// usage
this.$router.push({
    name: 'user',
    params: {
        test: 'hello there' // or anything you want
    }
}) 

---

在路由器中，

const router = new VueRouter({
  routes: [
    { path: 'YOUR__PATH', component: Bar, props: { authorName: 'Robert' } }
  ]
})

在 <Bar /> 组件内部，

var Bar = Vue.extend({
    props: ['authorName'],
    template: '<p>Hey, {{ authorName }}</p>'
});

---

这个问题很老，所以我不确定在提出问题时是否存在 Function mode，但它只能用于传递正确的道具。它仅在路由更改时调用，但所有 Vue 反应性规则适用于您传递的任何内容，如果它已经是反应性数据。

// Router config:
components: {
  default: Component0,
  named1: Component1
},
props: {
  default: (route) => {
    // <router-view :prop1="$store.importantCollection"/>
    return {
      prop1: store.importantCollection
    }
  },
  named1: function(route) {
    // <router-view :anotherProp="$store.otherData"/>
    return {
      anotherProp: store.otherData
    }
  },
}

请注意，这仅适用于您的 prop 函数的范围，以便它可以看到您要传递的数据。 route 参数不提供对 Vue 实例、Vuex 或 VueRouter 的引用。此外，named1 示例演示 this 也未绑定到任何实例。这似乎是设计使然，因此状态仅由 URL 定义。由于这些问题，最好使用在标记中接收正确道具并让路由器切换它们的命名视图。

// Router config:
components:
  {
    default: Component0,
    named1: Component1
  }
<!-- Markup -->
<router-view name="default" :prop1="$store.importantCollection"/>
<router-view name="named1" :anotherProp="$store.otherData"/>

使用这种方法，您的标记声明哪些视图是可能的并设置它们的意图，但路由器决定激活哪些视图。

---

 const User = {
      props: ['id'],
      template: '<div>User {{ id }}</div>'
    }
    const router = new VueRouter({
      routes: [
        { path: '/user/:id', component: User, props: true }

        // for routes with named views, you have to define the props option for each named view:
        {
          path: '/user/:id', 
          components: { default: User, sidebar: Sidebar },
          props: { default: true, sidebar: false }
        }
      ]
    })

对象模式

const router = new VueRouter({
  routes: [
    { path: '/promotion/from-newsletter', component: Promotion, props: { newsletterPopup: false } }
  ]
})

这是官方的回答。 link

---

利用：

this.$route.MY_PROP

获取路线道具

---