vue-router常用配置

本文介绍了在vue-cli中常用的router配置：
1.在router/index.js中配置路径

import Vue from 'vue'
import Router from 'vue-router'

import home from '@/page/home'        //引入组件文件
import about from '@/page/about'
import teacher from '@/page/teacher'
import HelloWorld from '@/components/HelloWorld'
import aboutIntr from "@/components/about-intr.vue"
import aboutJoin from "@/components/about-join.vue"
import aboutHistory from "@/components/about-history.vue"

Vue.use(Router)

export default new Router({
  routes: [
    {
      path:"/home",                    //路径
      name:"home",
      component:home,
      alias:"/"                            //别名，定义项目首页显示；        
    },
    {
      path:"/about",
      name:"about",
      component:about,
      children:[                               //定义二级路由，跟<router-view>使用可做选项卡；
        {path:"/",redirect:"intr"},       //rediect重定向；
        {
          path:"intr",
          component:aboutIntr
        },
        {
          path:"join",
          component:aboutJoin,
        },
        {
          path:"history",
          component:aboutHistory
        }
      ]
    },
    {
      path:"/teacher",
      name:"teacher",
      components:{                             // 命名多组件,通过具名路由实现也个页面显示多个组件
          default:teacher,
          left:HelloWorld
    }
    },
    {
      path: '/hello/:id',                 //定义动态路由
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

设置二级路由需要注意在index.html引入的文件的路径应为"/statice/css/reset.css"，否则加载不到样式
还有另一种常见的写法，如下：

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

export default [{
    path: '/',
    component: App,
    children: [{
        path: '',
        component: r => require.ensure([], () => r(require('../page/home')), 'home')  //require.ensure按需加载，减少首页渲染时间
    }, {
        path: '/item',
        component: r => require.ensure([], () => r(require('../page/item')), 'item')
    }, {
        path: '/score',
        component: r => require.ensure([], () => r(require('../page/score')), 'score')
    },{
        path:"/test",
        component:function(r){
            require.ensure([],function(){
                r(require('../page/home'))
            }, 'test')
        }
    }
]
}]

webpack 在编译时，会静态地解析代码中的 require.ensure()，同时将模块添加到一个分开的 chunk 当中。这个新的 chunk 会被 webpack 通过 jsonp 来按需加载。

router-link相关属性
（1）to：href属性，点击调用，router.replace("/path"),点击不留下历史记录；
（3）append：添加基路径
（4）active-class：点击样式
（5）exact-active-class:精准点击样式
（6）event：自定义触发事件

<router-link>有一个很好用的属性active-class,还有一个精准exact-active-class属性，可以做active效果，代码如下：

<router-link  to="/about"  active-class="className">设计点击效果</router-link>