vue-router 

1.路由（vue的一个插件），就是一组映射关系；

2.key为路径，value可能是function或component

安装

vue-router 

vue3 对应vue-router 4（npm i vue-router）

vue2 对应vue-router 3（npm i vue-router@3）

注意：

1.路由组件通常存放
pages文讲夹，一般组件通常存放在
components
文件夹。
2.通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。
3.每个组件都有自己的$route 属性，里面存储着自己的路由信息。
4.整个应用只有一个router，可以通过组件的srouter属性获取到。

基本路由使用

app.vue

<template><div id="app"><div class="app-con"><ul class="nav nav-pills nav-stacked"><li role="presentation" class="active"><router-link to="/home" active-class="a-active">Home</router-link></li><li role="presentation"><router-link to="/about" active-class="a-active">about</router-link></li></ul><router-view></router-view></div></div>
</template><script>
/* eslint-disable */
export default {name: "App",components: {},data() {return {};},computed: {},mounted() {},methods: {},
};
</script><style lang="less">
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;justify-content: flex-start;color: #2c3e50;margin-top: 60px;display: flex;flex-direction: column;.app-con {display: flex;flex-wrap: wrap;justify-content: space-around;.a-active {font-size: 20px;}}button {width: 80px;height: 38px;}
}
</style>

 index.js(创建文件夹routes/index.js)

import vueRouter from 'vue-router'
import About from '../components/About'
import Home from '../components/Home'
// 创建一个路由器
export default new vueRouter({
routes:[{path:"/about",component:About,},{path:"/home",component:Home,}
]
})

mian.js

import Vue from 'vue'
import App from './App'
import vueRouter from 'vue-router'
import router from './router'Vue.config.productionTip = false
Vue.use(vueRouter)
new Vue({render: h => h(App),router:router
}).$mount('#app')