Vue中Router笔记学习整理

发布时间 2023-08-07 22:34:45作者: 瑞姆

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 = []中写路由路径
3:路由跳转
 
第一种:<router-link>组件实现跳转
<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传参