vue-router 在项目中的使用

一、下载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: '',
  router  //引入路由
})

 

3、路由准备好后，在页面中的使用

 

1）新建组件：components/FooterGuide/FooterGuide.vue

2）在App.vue引入FooterGuide.vue组件 和 router-view 区域

 完