项目场景:
在从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 = false
new 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。温故而知新。