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 = 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>