在 vue router v-link 中传递路由参数答案

【问题标题】：Passing route params in vue router v-link在 vue router v-link 中传递路由参数
【发布时间】：2017-08-01 04:45:09
【问题描述】：

我在 Parent.vue 中有这个锚点：

<a v-link="{ path: '/somepath/somesubpath', query: { messageId: 999}}"> Here </a>

或者这个

<a v-link="{ path: '/somepath/somesubpath', params: { messageId: 999}}"> Here </a>

我的 Child.vue 是这样的：

<template>
    {{messageId}}
    // other html..
</template>

<script>
   export default {
        props: ['messageId']
   }
</script>

在 Child.vue 中，我看不到正在呈现的 {{messageId}} 的值。这意味着该值没有被传递。我正在使用 vue 路由器 0.7.5 并且文档 here 没有指定如何在 v-link 中指定参数（没有命名路由）。

那么使用带有 v-link 的 vue 路由器传递参数的正确方法是什么？

【问题讨论】：

你不应该只是使用this.$route.params.messageId吗？
@ceejayoz 你的意思是{{this.$route.params.messageId}}？（这不起作用
this 隐含在 {{ }} 标记中。试试{{ $route.params.messageId }}。在<script> 中应该是this.$route.params.messageId。
@ceejayoz 不起作用。似乎我没有以正确的方式在标签的 v-link 中传递数据:(

标签： vue.js vue-router

【解决方案1】：

路由参数在this.$route.params 属性中可用。它们不需要作为组件属性传递。

在您的情况下，您可以像这样访问模板中的 messageId 参数：

{{ $route.params.messageId }}

但是，您还需要确保 Child.vue 组件的模板具有单个根元素，而不仅仅是文本。否则，组件将不会渲染。

所以，你至少需要这样的东西：

<template>
  <div>
    {{ $route.params.messageId }}
  </div>
</template>

这是一个简单的例子：

Vue.component('child', {
  template: `
    <div>
      message id: {{ $route.params.messageID }}
    </div>
  `
});

const Home = { 
  template: '<div>Home</div>' 
};

const Message = { 
  template: `
    <div>
      <span>Message View</span> 
      <child></child>
    </div>
  ` 
};

const router = new VueRouter({
  routes: [
    { path: '/', component: Home, name: 'home' },
    { path: '/message', component: Message, name: 'message' }
  ]
})

new Vue({
  router,
  el: '#app'
})

<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<script src="https://npmcdn.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <router-link :to="{ name: 'home' }">home</router-link>
  <router-link :to="{ name: 'message', params: { messageID: 123 } }">message view</router-link>
  <router-view></router-view>
</div>

【讨论】：