【router-link详细介绍】-Toy模板网

这篇具有很好参考价值的文章主要介绍了【router-link详细介绍】。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1. router-link

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

以下是 router-link 的一些主要属性（props）和它们的用途：

1.1. to

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

字符串格式： <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 的所有导航选项，比如hash、query等，让你能以声明式的方式指定复杂的导航目标，它是构建 Vue.js 单页面应用（SPA）中的重要组件之一。文章来源地址https://www.toymoban.com/news/detail-811243.html

到了这里，关于【router-link详细介绍】的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！