Question

我在Parent.vue中有这个锚：

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

或者这个

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

My Child.vue是这样的：

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

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

在Child.vue中，我看不到正在呈现的{{messageId}}的值。这意味着该值未通过。我使用的是vue router 0.7.5，而文档here没有指定如何在v-link中指定params（没有命名路由）。

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

Answer 1

this.$route.params属性中提供了路径参数。它们不需要作为组件属性传递。

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

{{ $route.params.messageId }}

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

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

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

这是一个简单的例子：

＆＃13;

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'
})

＆＃13;

<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>

＆＃13;

在vue路由器v-link中传递路由参数

1 个答案: