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