vue知识掌握（三）vue-router

Vue-Router

路由管理器，可以更好的实现单页面的应用开发。

打开目录：src/router.index.js

import Vue from 'vue' 
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

如上在Router里面的routes是一个数组，而我们注册的路由都是由对象的形式加入的，

  {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
      children:[
            {

            }
       ]
    }

这里一般由四个配置参数：

1. path：路径（这个路径是个虚拟路径，由自己自由定义，默认项目会自动加载根目录'/'）
2. name: 路由名称，这个配置是可选的，看个人需求。
3. component: 组件名， 来源于上面的引入：import HelloWorld from '@/components/HelloWorld'
4. children: 子路由注册可选，类似于routes也是数组

路由注册方式一：

在Router外部加引用import，然后import内部注册

如：

import HelloWorld from '@/components/HelloWorld'

   {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }

路由注册方式二：

在component做引入，这样可以实现赖加载

如：

 {
      path: '/v-for',
      name: 'v-for',
      component: r => require.ensure([], () => r(require('../../docs/v-forbegood.md')))
 },

路由注册方式三：

在Router外部创建常量，常量名便是组件名，然后import内部注册

const home = r => require.ensure([], () => r(require('../page/home/home')), 'home')

 {
     path: '/home',
     component: home
 },