vue-router安装和使用

脚手架创建项目时，没有选择路由；添加路由方式记录在此：

vue-router安装和使用

• 下载vue-router

  • 指定版本下载

  npm i [email protected]

  • 直接下载默认安装最新版本

  npm install vue-router

  • 卸载

  npm uninstall vue-router

• 使用vue-router

import Vue from 'vue'

import App from './App.vue'

import ElementUI from 'element-ui';

// src目录下创建router文件夹 引入实例

import router from './router';

import 'element-ui/lib/theme-chalk/index.css';

import Print from 'vue-print-nb'; //引入

import htmlToPdf from '@/plugins/htmlToPdf'

Vue.config.productionTip = false

Vue.use(Print); //注册

Vue.use(ElementUI);

Vue.use(htmlToPdf)

new Vue({

 render: h => h(App),

 router

}).$mount('#app')

• router下创建index.js

  index.js

import VueRouter  from 'vue-router';
import Vue from 'vue';

// 通过Vue.use() 安装插件
Vue.use(VueRouter );

// 创建router对象
const routes  = [
  {
    path: "/home",
    name:"Home",
    component: () => import('@/view/home/HomeView.vue')
  },
  {
    path: "/shiftSchedule",
    name:"ShiftSchedule",
    component: () => import('@/view/reportTemplates/ShiftSchedule.vue')
  }
]

const router = new VueRouter({
  routes,
  mode: 'history',

});

export default router;

• 通过路由跳转