vue-router命名路由

<router-link to="/Home"></router-link>

/Home是在Router的全局配置中配置的path值。

这种显示的引用路径定义的URL一旦变更，所有引用的地方都需要改，其工作量可想而知。

但是vue-router提供了一种隐式的引用路径，即命名路由，通过路由的名称取代URL的直接引用。

因此需要给Router的全局配置进行重构：

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
//import Hello from '@/components/Hello'
import Home from '@/Home'
import Brand from '@/Brand'
import Member from '@/Member'
import Cart from '@/Cart'
import Me from '@/Me'

import Detail from '@/Detail'

import Collection from '@/Collection'
import Trace from '@/Trace'
import Default from '@/Default'

Vue.use(Router)

export default new Router({
  // mode: 'history',
  // base: __dirname,
  // linkActiveClass: 'active', // 更改激活状态的Class值
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
      children: [
        {
          path: '/detail/:id',
          name: 'Detail',
          component: Detail
        },
      ]
    },
    {
      path: '/brand',
      name: 'Brand',
      component: Brand
    },
    {
      path: '/member',
      name: 'Member',
      component: Member
    },
    {
      path: '/cart',
      name: 'Cart',
      component: Cart
    },
    {
      path: '/me',
      name: 'Me',
      component: Me,
      children: [
        {
          path: '',
          name: 'Default',
          component: Default
        },
        {
          path: 'collection/:id',
          name: 'Collection',
          component: Collection
        },
        {
          path: 'trace',
          name: 'Trace',
          component: Trace
        }
      ]
    }
  ]
})

命名路由引用时采用的是 ：to 而不是 to ，而且向router-link的to属性传入的是一个对象。

<router-link :to="{name:'Home'}" tag="li" exact>
  <div>
     <i class="icon iconfont icon-31shouye"></i>
  </div>
  <div>精选</div>
</router-link>

可以在Home组件的模板中获取name的值{{$route.name}}，在js中使用this.$route.name获取name值

本文参考 技术胖博客  vue-router官网