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'的路由

4:query传参