vue学习笔记——路由配置

Posted 2020-10-31 zhoulixue

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