1 路由route概述
1.1 路由
什么是路由：
- Vue 路由是一种管理应用程序中不同页面之间导航的机制。
- 在单页应用程序中，所有的交互都是在同一个页面中完成的，但是通过使用Vue路由，可以实现页面之间的无缝切换，就像传统的多页应用程序一样。
路由的实现：
路由是通过URL的变化来实现的。Vue router 通过检测URL的变化来决定哪个组件应该被渲染。Vue路由还可以实现嵌套路由，允许在应用程序中创建复杂的页面结构。
路由的好处：
Vue路由是Vue.js的一个重要组成部分，它可以让我们轻松地构建复杂的单页应用程序，提高用户体验和开发效率。
理解：一个路由（route）就是一组映射关系（key - value），多个路由需要路由器（router）进行管理。在Vue中，这个路由的映射关系就是路径和组件之间的映射关系
1.2 SPA应用
单页web应用（single page web application,SPA）
- 是目前进行网页开发的趋势，整个应用总体来说就是只有一个完整的页面
- 一个SPA应用大致包含两个部分，一个是导航区，一个是展示区，当点击导航区时，只有展示区进行变化，这样就实现了一个复杂的单页应用程序。
- 例如下面这个网站，其中上半部分是导航区，负责选择需要查看的内容，下面的内容是展示区，当点击上面导航区时，不会刷新页面，只是会做页面的局部更新
- 数据需要通过Ajax请求来实现
2 vue-router
2.1 Vue-router基本介绍
- Vue-router是Vue.js官方提供的一个路由管理插件，专门帮助用于来实现构建SPA应用。
- 它可以帮助我们管理应用程序中不同页面之间的导航，实现单页应用程序的无缝切换。
- Vue-router还提供了许多有用的特性，如路由参数、路由导航守卫、动态路由等，可以帮助我们更好地控制应用程序的导航行为。
2.2 vue-router的安装
在此使用的是yarn进行安装
需要注意的是：
- vue-router3适用的是vue2版本
- vue-router4适用的是vue3版本
安装时需要注意，在此我们安装的是适合Vue2版本的 vue-router3
安装vue-routeryarn add vue-router@3
3 实现一个简单的案例
案例样式：
当点击About或者Home时，展示不同的内容
Step1：
编写About.vue 和 Home.vue的内容和样式
然后在App.vue中写入下面内容
<router-link class="list-group-item" active-class="active" to="/about">About</router-link>
<router-link class="list-group-item" active-class="active" to="/home">Home</router-link>
router-link是实现跳转内容的标签，其中to属性表示跳转的组件
active-class负责元素被激活时候的样式
Step2：
在src下创建文件夹router，并创建文件index.js，编写router配置项
//引入VueRouter
import VueRouter from 'vue-router'
//引入Luyou 组件
import About from '../components/About'
import Home from '../components/Home'
//创建router实例对象，去管理一组一组的路由规则
const router = new VueRouter({
routes:[
{
path:'/about',
component:About
},
{
path:'/home',
component:Home
}
]
})
//暴露router
export default router
Step3：
在main.js下引入编写的路由配置
//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入VueRouter
import VueRouter from 'vue-router'
//引入路由器
import router from './router'
//关闭Vue的生产提示
Vue.config.productionTip = false
//应用插件
Vue.use(VueRouter)
//创建vm
new Vue({
el:'#app',
render: h => h(App),
router:router
})
4 总结
通过今天的学习，我学习了vue中的路由，了解了什么是路由、为什么用路由、什么是SPA应用、了解了vue中实现路由的插件vue-router，怎么安装和引入vue-router，并且我还做了一个借助路由实现跳转的SPA页面demo，通过点击导航栏不同的内容，能够实现展示区展示不同的界面，并且不需要借助网站的刷新。路由是vue学习中很关键的一个环节，后面好需要继续学习
