Vue-router参数传递

• 用name传递参数

1. 在路由文件src/router/index.js里配置name属性。

routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    }
 ]

2. 模板里(src/App.vue)用$route.name的形势接收，如直接在模板中显示：

<p>{{ $route.name}}</p>

• 通过<router-link> 标签中的to传参

<router-link :to="{name:xxx,params:{key:value}}">valueString</router-link>

to前边带冒号，后边跟一个对象形势的字符串

• name：在路由配置文件router/index.js中起的name值。
• params：要传的参数，也是对象类型，在对象里可以传递多个值。

修改src/App.vue里的<router-link>标签,把hi1页面的<router-link>进行修改。

 <router-link :to="{name:'hi1',params:{username:'js'}}">Hi页面1</router-link>

在src/reouter/index.js文件里配置name

{path:'/hi1',name:'hi1',component:Hi1},

最后在模板里(src/components/Hi1.vue)用$route.params.username进行接收.

{{$route.params.username}}