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({