在
Vue 3中，实现
路由跳转有多种方法，具体如下：
### 使用`useRouter`函数（组合式API）
可以在`<script setup>`中使用`useRouter`函数获取
路由实例，然后调用`router.push()`方法进行
路由跳转。`router.push()`方法可以接受多种参数形式，以下是几种常见的使用方式：
- **传入
路由URL**
```
vue
<template>
<button @click="goNews">
跳转新闻</button>
</template>
<script setup lang="ts">
import { useRouter } from '
vue-router';
const router = useRouter();
function goNews() {
router.push("/news?mykey=luckey");
}
</script>
```
- **传入包含`path`和`query`的对象**
```
vue
<template>
<button @click="goHome">
跳转主页</button>
</template>
<script setup>
import { useRouter } from '
vue-router';
const router = useRouter();
const goHome = () => {
router.push({ path: '/home', query: { id: '12' } });
};
</script>
```
- **传入包含`path`和`params`的对象**
```
vue
<template>
<button @click="goHomeWithParams">
跳转主页（带参数）</button>
</template>
<script setup>
import { useRouter } from '
vue-router';
const router = useRouter();
const goHomeWithParams = () => {
router.push({ path: '/home', params: { a: 12 } });
};
</script>
```
- **通过
路由名称
跳转**
```
vue
<template>
<button @click="goToAbout">
跳转到关于页</button>
</template>
<script setup>
import { useRouter } from '
vue-router';
const router = useRouter();
const goToAbout = () => {
router.push({ name: 'About' });
};
</script>
```
上述示例中的代码分别参考了引用[1]、引用[2]和引用[3]。
### 使用`router.resolve`结合`window.open`新窗口打开页面
`router.push`只能在当前窗口打开页面，而`router.resolve`结合`window.open`可以在新窗口打开页面。不过需要注意的是，`router.resolve`只支持`query`参数，如果需要地址栏参数不可见，需结合`localStorage`或第三方插件保存。
```
vue
<template>
<button @click="openUserPage">在新窗口打开用户页</button>
</template>
<script setup>
import { useRouter } from '
vue-router';
const router = useRouter();
const openUserPage = () => {
window.open(router.resolve({ path: "/user", query: { a: 1 } }).href, '_blank');
};
</script>
```
此示例代码参考了引用[2]。
### 使用`RouterLink`组件
使用`RouterLink`组件可以方便地实现
路由间的
跳转，它会渲染成一个`<a>`标签。
```
vue
<template>
<RouterLink to="/about">
跳转到关于页</RouterLink>
</template>
```
此方式虽然在给定引用中未详细代码示例，但在
Vue 3
路由中是常见的基础用法。
扫一扫
2564
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
