Vue中Router（路由跳转）
1：摘要：
Vue中的Router是Vue.js框架中的一个核心插件，用于实现单页应用（SPA）的前端路由管理。它允许你在应用中定义不同的URL路径与对应的组件之间的映射，以便在不刷新整个页面的情况下，实现页面间的切换和数据加载。
主要功能包括以下几个方面：
声明式路由：你可以通过定义路由表，指定URL和组件之间的映射关系。这可以在Vue组件中通过简单的标签或方法调用来实现页面切换。
动态路由匹配：Vue Router允许你在路由表中使用动态参数，如/:id，以便实现根据不同的参数加载不同的组件或数据。
嵌套路由：你可以在Vue组件内部嵌套子路由，从而实现更复杂的页面层级结构。
导航守卫：Vue Router提供了全局的导航守卫和组件级别的导航守卫，以便在路由切换前后执行一些逻辑，比如身份验证、页面权限控制等。
编程式路由：除了声明式路由外，你也可以通过编程方式来实现路由的切换，比如使用
2：配置
1：在创建时，勾选Router ( (创建脚手架，{vue create 文件名))
2:路由位置在scr/router/index.js中
3：解析运用
在const routes = []中写路由路径
<router-link to="/about">About</router-link>
相当于普通的<a>标签，但它会根据to属性的值来生成正确的链接，并在点击时触发路由切换，会激活to中的路由值，而不会重新加载整个页面。要将to属性设置为routes中的path，也就是在
在const routes = []中写路由路径
<router-link>组件有一些其他的属性可用，例如：
tag: 指定生成的链接使用哪种HTML标签，默认为<a>标签，但你也可以设置为其他标签，例如如<button>。
replace: 如果设置为true，将使用router.replace()方法而不是router.push()方法导航。
active-class: 指定当链接对应当前活动路由时要添加的CSS类名
以下是例子：
<router-link to="/about" tag="button" replace active-class="active-link">About</router-link>
第二种：$router编程式导航方法来实现路由跳转
1:push(loacation) loacation:跳转目标路由
this.$router.push('/path'); // 跳转到指定路径
可以写成两种形式，字符串和对象
2:replace(loacation)
this.$router.replace('/path'); // 用新的路由替换当前路由，不会产生历史记录
3:go(n)
this.$router.go(-1); // 后退一页，类似浏览器的后退功能 this.$router.go(1); // 前进一页，类似浏览器的前进功能
4:通过命名路由进行跳转：
this.$router.push({ name: 'routeName' }); // 跳转到命名为'routeName'的路由
