除了使用 <router-link>
创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现。
导航到不同的位置
注意: 下面的示例中的 router
指代路由器实例。在组件内部,你可以使用 $router
属性访问路由,例如 this.$router.push(...)
。如果使用组合式 API,你可以通过调用 useRouter()
来访问路由器。
想要导航到不同的 URL,可以使用 router.push
方法。这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,会回到之前的 URL。
当你点击 <router-link>
时,内部会调用这个方法,所以点击 <router-link :to="...">
相当于调用 router.push(...)
:
声明式 | 编程式 |
---|---|
<router-link :to="..."> | router.push(...) |
该方法的参数可以是一个字符串路径,或者一个描述地址的对象。例如:
// 字符串路径
router.push('/users/eduardo')
// 带有路径的对象
router.push({ path: '/users/eduardo' })
// 命名的路由,并加上参数,让路由建立 url
router.push({ name: 'user', params: { username: 'eduardo' } })
// 带查询参数,结果是 /register?plan=private
router.push({ path: '/register', query: { plan: 'private' } })
// 带 hash,结果是 /about#team
router.push({ path: '/about', hash: '#team' })
美化页面样式
<template>
<div class="h-12 bg-indigo-50 flex justify-center items-center">上</div>
<div class="flex min-h-72 bg-teal-50">
<div class="min-w-36 bg-purple-200">
左
</div>
<div>
<router-view></router-view>
</div>
</div>
</template>
通过router-link跳转
<template>
<div class="h-12 bg-indigo-50 flex justify-center items-center">上</div>
<div class="flex min-h-72 bg-teal-50">
<div class="min-w-36 bg-purple-200 flex flex-col">
<router-link to="/index" class="flex-1 h-12 bg-red-300 hover:bg-indigo-500 flex justify-center items-center">首页</router-link>
<router-link to="/about" class="flex-1 h-12 bg-red-300 hover:bg-indigo-500 flex justify-center items-center">关于</router-link>
</div>
<div>
<router-view></router-view>
</div>
</div>
</template>
通过按钮点击跳转首页
<script setup>
import {useRouter} from "vue-router";
const router = useRouter()
const clickToIndex = () => {
router.push("/index")
}
</script>
<template>
<div class="h-12 bg-indigo-50 flex justify-center items-center">上</div>
<div class="flex min-h-72 bg-teal-50">
<div class="min-w-36 bg-purple-200 flex flex-col">
<router-link to="/index" class="flex-1 h-12 bg-red-300 hover:bg-indigo-500 flex justify-center items-center">
首页
</router-link>
<router-link to="/about" class="flex-1 h-12 bg-red-300 hover:bg-indigo-500 flex justify-center items-center">
关于
</router-link>
<button
class="flex-1 h-12 bg-red-300 hover:bg-indigo-500 flex justify-center items-center"
@click="clickToIndex"
>按钮:首页
</button>
</div>
<div>
<router-view></router-view>
</div>
</div>
</template>
路径对象
const clickToIndex = () => {
//router.push("/index")
router.push({path: "/index"})
}
通过按钮点击跳转关于页面
<script setup>
import {useRouter} from "vue-router";
const router = useRouter()
const clickToIndex = () => {
//router.push("/index")
router.push({path: "/index"})
}
const clickToAbout = () => {
router.push({path: "/about"})
}
</script>
<template>
<div class="h-12 bg-indigo-50 flex justify-center items-center">上</div>
<div class="flex min-h-72 bg-teal-50">
<div class="min-w-36 bg-purple-200 flex flex-col">
<router-link to="/index" class="flex-1 h-12 bg-red-300 hover:bg-indigo-500 flex justify-center items-center">
首页
</router-link>
<router-link to="/about" class="flex-1 h-12 bg-red-300 hover:bg-indigo-500 flex justify-center items-center">
关于
</router-link>
<button
class="flex-1 h-12 bg-red-300 hover:bg-indigo-500 flex justify-center items-center"
@click="clickToIndex"
>按钮:首页
</button>
<button
class="flex-1 h-12 bg-red-300 hover:bg-indigo-500 flex justify-center items-center"
@click="clickToAbout"
>按钮:关于
</button>
</div>
<div>
<router-view></router-view>
</div>
</div>
</template>
通过路径传参
const clickToAbout = () => {
router.push({path: "/about/123", query: {"id": "333"}})
}
使用命名路由
const clickToAbout = () => {
router.push({name: "layout_about", params: {"id": "333"}, query: {"id": "333"}})
}
替换当前位置
它的作用类似于 router.push
,唯一不同的是,它在导航时不会向 history 添加新记录,正如它的名字所暗示的那样——它取代了当前的条目。
声明式 | 编程式 |
---|---|
<router-link :to="..." replace> | router.replace(...) |
也可以直接在传递给 router.push
的 to
参数中增加一个属性 replace: true
:
router.push({ path: '/home', replace: true })
// 相当于
router.replace({ path: '/home' })
横跨历史
该方法采用一个整数作为参数,表示在历史堆栈中前进或后退多少步,类似于 window.history.go(n)
。
例子:
// 向前移动一条记录,与 router.forward() 相同
router.go(1)
// 返回一条记录,与 router.back() 相同
router.go(-1)
// 前进 3 条记录
router.go(3)
// 如果没有那么多记录,静默失败
router.go(-100)
router.go(100)