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
 },