vue2 配置router

项目场景：

在从0到1搭建前端项目时，经常需要配置路由router。

---

配置步骤

1、下载依赖

npm install vue-router@3     

2、创建router/index.js。

import Vue from "vue";
import  VueRouter from "vue-router"Vue.use(VueRouter)const routes = [{path:"/",//首页默认加载路由redirect:'/pdf'},{path:'/pdf',//路由名称//使用路由懒加载component:()=>import('../views/pdf.vue')//页面路径，其中pdf.vue一定要创建}]const router = new VueRouter({mode:'hash',//路由有hash 和history,一般本地开发就用hash,如果需要配置history,需要配置服务器routes
})export default router

3、加载router。

在main.js中加载router

import Vue from 'vue'
import App from './App.vue'
import router from './router'
//这个是加载的将html转pdf
//import htmlToPdf from '@/utils/htmlToPdf'//Vue.use(htmlToPdf)
Vue.config.productionTip = falsenew Vue({router,render: h => h(App),
}).$mount('#app')

4、配置页面。在App.vue中配置路由

<template><div id="app"><router-view></router-view></div>
</template><script>
// import HelloWorld from './components/HelloWorld.vue'export default {name: 'App',components: {// HelloWorld}
}
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

---

收获总结：

现在的项目比较老，使用的vue2，所有又重新温习一遍vue。温故而知新。