【router-link详细介绍】

发布时间:2024年01月20日

1. router-link

router-link 是一个用于在 Vue 应用中创建导航链接的组件,由 Vue Router 提供,这个组件用于在不刷新页面的情况下导航到不同的 URL,并且支持 HTML History API,使用 router-link 组件能够生成一个<a>标签,其默认行为与普通的链接相同,但它能够更加智能地处理应用内的导航。

以下是 router-link 的一些主要属性(props)和它们的用途:

1.1. to

to此属性必须设置,它决定了导航的目标路由,其值可以是一个字符串或者一个对象,当使用对象时,可以设置更多选项如pathqueryparams

  • 字符串格式: <router-link to="/about">About</router-link>
  • 对象格式: <router-link :to="{ name: 'about', params: { userId: 123 }}">About</router-link>

1.2. replace

replace设置为 true 后,当点击链接时,会调用 router.replace() 而不是 router.push(),导航后不会留下 history 记录。

  • 示例:
<router-link :to="{ path: '/home'}" replace></router-link>

如果配置了replace,则在点击该链接,将会导致history记录被清空,不能再执行回退。

vue中导航中的后退-前进-编程式导航

this.$router.go(-1) :代表着后退
this.$router.go(1):代表着前进
切换到path为/home的路由
this.$router.push({    
     path:'/home'
});
//或者使用path,推荐path
this.$router.push({    
     path:'/home'
});

示例一:编程式前进后退按键
1)在页面上加入前进和后退按钮

<p>
    <button @click="previous">前进</button>
    <button @click="next">后退</button>
</p>

2)添加事件处理程序

methods: {
    //前进
    previous: function() {
        this.$router.go(1);
    },
    //后退
    next: function() {
        this.$router.go(-1);
    }
}
vue的 $
除了数据属性,Vue 实例还暴露了一些有用的实例属性与方法,它们都有前缀 $,以便与用户定义的属性区分开

示例二:切换到指定路由:
添加一个“回家”按钮

<button @click="gotohome">回家</button>
gotohome: function() {
    console.log("go to home");
    this.$router.push({
        path: '/home'
    });
}

示例三,设置默认显示的组件:
这个很简单,只要将需要默认显示的组件对应的路由的path设置为"/"即可

//定义路由表
var routes = [
    //默认显示home
    {path:'/', component:Home}, 
    {path:'/home', component:Home},
    {path:'/about', component:About}
];

示例四:
如果配置了replace,则在点击该链接,将会导致history记录被清空,不能再执行回退。
例如: 将

<router-link to="/home">Home</router-link>

加入replace属性,修改为:

<router-link to="/home" replace>Home</router-link>

通过测试可以看到,点击home后,history记录被清空,所以一般不用。

1.3. append

append设置为 true 时,在当前(相对)路径前添加基路径,如果你当前的路径是 /a<router-link to="b" append> 将导航到 /a/b

1.4. tag

<router-link>默认渲染为<a>标签,有时候想要 <router-link> 渲染成某种标签,例如 <li>, 于是我们使用 tag prop类指定何种标签,同样它还是会监听点击,触发导航,(如果不指定tag,默认渲染为a标签)

<router-link to="/foo" tag="li">foo</router-link>

<!-- 渲染结果 -->
<li>foo</li>

1.5. active-class

active-class全局配置 router-link-active 的默认值,可以通过这个 prop 设置当链接激活时应用于渲染标签的 CSS 类名。

1.6. exact

exact如果设置为 true,则只有在匹配的路径完全等于链接的路径时,才应用 active-class 类。

1.7. event

event指定触发路由导航的事件名,默认为 click

1.8. exact-active-class

exact-active-class全局配置 router-link-exact-active 的默认值,可以通过这个 prop 设置,当链接的完整路径完全匹配当前路径时应用的 CSS 类名。

1.9. aria-current-value

aria-current-value当链接处于活动状态时,aria-current 的值,默认是 page

上述属性使得 router-link 不仅仅是一个链接,还能够根据当前路由的状态调整样式,比如当链接指向当前路由时,可以自动设置一个激活状态的样式类。此外,router-link 还会进行各种内部优化,以确保在相同路由下不重新渲染和最小化 DOM 操作,提高性能。

router-link 组件还支持 Vue Router 的所有导航选项,比如hashquery等,让你能以声明式的方式指定复杂的导航目标,它是构建 Vue.js 单页面应用(SPA)中的重要组件之一。

文章来源:https://blog.csdn.net/cz88888888666/article/details/135705287
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。