vue使用vue-route

一、下载vue-router

npm install vue-router --save

二、编码

1、在项目中新建文件夹 router/index.js

/*
* 路由对象模块
* */
import Vue from 'vue'
import VueRouter from 'vue-router'

/*引入pages*/
const MSite = ()=>import('../pages/MSite/MSite');
const Profile = ()=>import('../pages/Profile/profile');
const Patient = ()=>import('../pages/Patient/Patient');

//申明使用插件
Vue.use(VueRouter)

export default new VueRouter({
  routes:[
    {
      path:'/msite',
      component: MSite,
      meta: {
        showFooter: true
      }
    },
    {
      path:'/profile',
      component:Profile,
      meta: {
        showFooter: true
      }
    },
    {
      path:'/patient',
      component:Patient,
      meta: {
        showFooter: false
      }
    },
    {
      path: '/',
      redirect: '/msite' //系统默认页
    }
  ]
})

2、在main.js中全局使用router

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router' //引入路由



/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>',
  router  //引入路由
})