1.配置路由

在router/index.js文件中對所有的路由信息進行配置。

// 首先引入vue和vue-router
import Vue from ‘vue‘
import VueRouter from ‘vue-router‘

// 使用vue-router
Vue.use(VueRouter)

// 引入待配置的視圖組件
import Foo from ‘@/views/Foo.vue‘
import Bar from ‘@/views/Bar‘

// 配置路由信息
const route = [
  {
    path: ‘/foo‘,
    component: Foo,
    meta: {
      title: 
 
‘foo頁面‘，
      requireAuth: false
    }    
  },
  {
     path: ‘/bar‘,
     component: Bar,
     meta: {
       title: ‘bar頁面‘
     }
  }        
]

// 利用配置信息新建vue-router路由（important）
const router = new VueRouter({mode: ‘history‘, routes})

// 導出
export default router

2.全局註冊路由信息

在main.js文件中全局註冊路由信息。

// 引入vue
 

import Vue from ‘vue‘

// 引入主組件
import App from ‘./App‘

// 引入路由信息
import router from ‘./router‘

//新建全局vue實例，並註冊router
new Vue({
  el: ‘#app‘,
  router,    //註冊路由
  store,    //註冊store
  components: {App}, //主組件 
  template: ‘<App/>‘ //替代元素    
})

vue學習筆記（二）——路由配置