vue學習筆記(二)——路由配置
阿新 • • 發佈:2018-04-20
out from dex const foo font XP 視圖組件 col
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文件中全局註冊路由信息。
// 引入vueimport 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學習筆記(二)——路由配置