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>