vue-router传递参数

vue-router传递参数

通过URL地址传递参数只是一个形式，vue-router为我们提供了传递参数的功能，有这么一个需求，当点击导航菜单时，跳转页面能显示出当前页面的路径，来告诉用户页面位置（类似面包屑导航）

用name传递参数

name的一种作用就是传递参数

router->index.js中：

import Vue from 'vue'import Router from 'vue-router'import Hello from '@/components/Hello'import First from '@/components/first'import First1 from '@/components/first1'import First2 from '@/components/first2'Vue.use(Router)export default new Router({  routes: [    {      path: '/',      name: 'Hello',      component: Hello    },    {      path: '/first',      component: First,      children: [        {path : '/', name: 'first', component:First},        {path : 'first1', name: 'first1', component:First1},        {path : 'first2', name: 'first2',component:First2}      ]    }  ]})

可以看到这个name的值，当在App.vue中可以通过<p>{{$route.name}}</p>得到上面的name属性

通过router-link传递参数

在 App.vue 中：

<router-link :to="{name:'first1', params: {userName:'vam'}}">vam</router-link>

这个name和router->index.js中的name对应，在指定的页面中，可以获得上面设置的内容，在first1.vue中

<p>{{$route.params.userName}}</p>