首页 > 其他 > 详细

vue学习笔记(二)——路由配置

时间:2018-04-20 21:44:26      阅读:142      评论:0      收藏:0      [点我收藏+]

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学习笔记(二)——路由配置

原文:https://www.cnblogs.com/zhoulixue/p/8893467.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!