脚手架创建项目时,没有选择路由;添加路由方式记录在此:
vue-router安装和使用
-
下载vue-router
- 指定版本下载
npm i vue-router@3.2.0
- 直接下载默认安装最新版本
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;
- 通过路由跳转
<template>
<div>
<el-button type="primary" size="small" @click="toSchedule">报表模板</el-button>
</div>
</template>
<script>
export default {
mounted() {
},
methods:{
toSchedule() {
this.$router.push({path: "/shiftSchedule"})
}
}
};
</script>
<style lang="scss" scoped></style>