vue-router 是 Vue 的一个插件库，适用于构建单页面应用。
单页面应用：整个应用中只有一个完整的页面，切换页面就是替换页面中的内容。
工作原理：当浏览器的路径发生改变时，路由器会自动显示路径所对应的组件。
嵌套路由：通过路由实现组件的嵌套展示，就叫做嵌套路由。
一. Vue-router 安装及配置：
注：由于 vue-router 4 及以上的版本只能在 vue3 中使用，所以我们需要安装 vue-router 3 的版本。
安装指定版本：
npm install vue-router@版本号
安装最新版本：
npm install vue-router
二、创建路由组件：
在 src 目录下创建 views 文件夹，并创建 Home.vue 和 About.vue 组件。
<template>
<div>
<h1>Home页面</h1>
<router-link to="/about">前往About页面</router-link>
</div>
</template>
<script>
export default {
name: "Home"
}
</script><template>
<div>
<h1>About页面</h1>
<router-link to="/">前往Home首页</router-link>
</div>
</template>
<script>
export default {
name: "About"
}
</script>备注：router-link 标签类似于 a 标签，而 to 属性和 a 标签的 href 属性作用相似。
三、配置 Vue-router：
在 src 目录下创建 router 文件夹，并在文件夹内创建 index.js 文件，添加以下内容。
// 引入Vue核心库
import Vue from 'vue'
// 引入vue-router
import VueRouter from 'vue-router'
// 应用vue-router插件
Vue.use(VueRouter)
// 引入组件（方式一）
import Home from '../views/Home.vue'
// 配置路由
const routes = [
{
// 路径，/ 表示首页
path: '/',
// 使用组件（方式一）
component: Home
},
{
// 路径
path: '/about',
// 引入并使用组件（方式二）
component: () => import('../views/About.vue')
}
]
// 创建路由器
const router = new VueRouter({
routes
})
// 导出路由器
export default router引入组件的区别：
方式一：直接导入，就是在应用第一次执行时，就会加载这个文件。
import Home from '../views/Home.vue'
component: Home方式二：路由懒加载，就是跳转到这个页面的时候，再去加载这个文件。
component: () => import('../views/About.vue')四、引入 Vue-router:
在 main.js 文件中引入 router，并挂载到 vue 实例上
import Vue from 'vue'
import App from './App.vue'
// 1.引入vue-router
import router from './router'
Vue.config.productionTip = false
new Vue({
// 2.挂载到vue实例上
router,
render: h => h(App)
}).$mount('#app')五、设置路由出口:
在 App.vue 组件中设置 router-view 标签，指定组件呈现位置。
<template>
<router-view></router-view>
</template>六、最终效果:
这样就配置好了，当点击链接时会修改浏览器的路径，从而显示对应的组件。
注意：
路由组件通常放在 views 文件夹内，而一般组件放在 components 文件夹内。
跳转页面时，会先将当前组件销毁，再去加载新组件。
每个组件都有自己的 $route 属性，里面存放着自己的路由信息。
整个应用只有一个 $router 路由器，可以通过组件的 $router 属性获取。
原创作者：吴小糖
创作时间：2023.7.18