vue学习笔记（二）——路由配置

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/>\' //替代元素    
})