你的位置：
首页
>
IT圈
>
vue3 setup 路由跳转方式
2024年6月1日发(作者：睢书兰)
vue3 setup 路由跳转方式
在 3中，使用Vue Router实现路由跳转是非常常见的需
求。本文将详细介绍Vue 3中设置路由跳转的方式，包括基本路由设
置、路由传参、路由导航守卫等，帮助读者全面了解Vue 3的路由跳
转功能。
一、基本路由设置
1. 安装Vue Router
首先，需要在项目中安装Vue Router。可以通过命令行工具使
用npm或yarn进行安装。打开命令行工具，在项目根目录下执行以下
命令：
npm install vue-router
yarn add vue-router
2. 创建路由实例
在项目中的src目录下创建一个文件，并引入Vue
和Vue Router库：
```javascript
import { createRouter, createWebHashHistory } from
'vue-router';
import Home from './views/';
const routes = [
path: '/',
name: 'Home',
component: Home
// 其他路由配置...
const router = createRouter({
history: createWebHashHistory(),
routes
export default router;
3. 在入口文件中挂载路由
打开项目的入口文件（一般是文件），增加如下代码：
```javascript
import { createApp } from 'vue';
import App from './';
import router from './router';
createApp(App).use(router).mount('#app');
4. 设置路由导航
在项目的视图组件中，可以设置路由跳转。例如，在
src/views/中：
```vue
About
在上述代码中，指令创建一个可以点击的链接，
跳转到"/about"路径。同时，指令会根据当前路由显示
对应的组件。
5. 运行项目
至此，基础路由设置完成。在命令行工具中执行以下命令来启
动项目：
npm run serve
yarn serve
在浏览器中访问 localhost:8080/，即可看到Home组
件，并可点击链接跳转到/about路径。
二、路由传参
有时候，我们需要在路由之间传递参数。Vue Router提供了多种
传参方式。
1. 动态路由传参
可以在路由配置中使用动态路由进行传参。例如，在
文件中定义如下路由：
```javascript
const routes = [
path: '/user/:id',
name: 'User',
component: User
在上述代码中，:id是一个动态的参数，可以在URL中作为参
数传递给User组件。例如，访问/user/123，id参数值为123。
在User组件中可以通过$获取到传递的参数
值。
2. 查询参数传参
另一种传递参数的方式是使用查询参数。例如，在路由配置中
设置如下路由：
```javascript
const routes = [
path: '/user',
name: 'User',
component: User
在URL中使用查询参数传递参数。例如，访问/user?id=123，
参数id的值为123。
在User组件中可以通过$获取到传递的查询参
数值。
3. 编程式导航传参
除了在模板中使用进行导航之外，还可以在
JavaScript中使用编程式导航进行跳转。例如：
```javascript
this.$({ path: '/user', query: { id:
123 }});
在上述代码中，通过this.$()方法进行跳转，并
传递了参数id。
三、路由导航守卫
路由导航守卫可以在路由跳转前后执行一些逻辑操作。Vue
Router提供了多个导航守卫，包括全局守卫、路由守卫、组件守卫等。
1. 全局守卫
在文件中，可以定义全局的路由守卫。例如，在路
由实例中添加beforeEach()方法：
```javascript
Each((to, from, next) => {
// 在跳转前执行一些逻辑操作，例如验证登录状态
if ( === 'User' && !isLoggedIn()) {
next({ name: 'Login' });
} else {
next();
在上述代码中，beforeEach()方法在每次路由跳转前执行。通
过调用next()方法来控制路由是否继续跳转。
2. 路由守卫
路由守卫是针对具体路由的守卫。例如，在路由配置中的一个
路由中添加beforeEnter()方法：
```javascript
const routes = [
path: '/user',
name: 'User',
component: User,
beforeEnter: (to, from, next) => {
// 在跳转到/user路由前执行一些逻辑操作
if (!isLoggedIn()) {
next({ name: 'Login' });
} else {
next();
在上述代码中，beforeEnter()方法只会在跳转到该路由时执
行。
3. 组件守卫
组件守卫是在组件中定义的守卫方法。例如，在User组件中
添加beforeRouteUpdate()方法：
```javascript
export default {
beforeRouteUpdate(to, from, next) {
// 在组件复用时执行一些逻辑操作
if ( !== ) {
// 参数id发生变化
ser();
next();
// 其他组件方法...
在上述代码中，beforeRouteUpdate()方法在组件复用时执行，
可以在该方法中判断参数的变化并执行相应的逻辑操作。
本文介绍了在Vue 3中设置路由跳转的方式。首先，需安装Vue
Router，并在项目中创建路由实例。然后，通过和
进行基础路由设置。接着，介绍了路由传参的几种方式，
包括动态路由传参、查询参数传参和编程式导航传参。最后，详细介
绍了路由导航守卫，包括全局守卫、路由守卫和组件守卫。通过本文
的介绍，读者可以全面了解Vue 3中设置路由跳转的方式，并在实际
开发中灵活运用。
2024年6月1日发(作者：睢书兰)
vue3 setup 路由跳转方式
在 3中，使用Vue Router实现路由跳转是非常常见的需
求。本文将详细介绍Vue 3中设置路由跳转的方式，包括基本路由设
置、路由传参、路由导航守卫等，帮助读者全面了解Vue 3的路由跳
转功能。
一、基本路由设置
1. 安装Vue Router
首先，需要在项目中安装Vue Router。可以通过命令行工具使
用npm或yarn进行安装。打开命令行工具，在项目根目录下执行以下
命令：
npm install vue-router
yarn add vue-router
2. 创建路由实例
在项目中的src目录下创建一个文件，并引入Vue
和Vue Router库：
```javascript
import { createRouter, createWebHashHistory } from
'vue-router';
import Home from './views/';
const routes = [
path: '/',
name: 'Home',
component: Home
// 其他路由配置...
const router = createRouter({
history: createWebHashHistory(),
routes
export default router;
3. 在入口文件中挂载路由
打开项目的入口文件（一般是文件），增加如下代码：
```javascript
import { createApp } from 'vue';
import App from './';
import router from './router';
createApp(App).use(router).mount('#app');
4. 设置路由导航
在项目的视图组件中，可以设置路由跳转。例如，在
src/views/中：
```vue
About
5. 运行项目
1. 动态路由传参
2. 查询参数传参
3. 编程式导航传参
1. 全局守卫
2. 路由守卫
3. 组件守卫
// 其他组件方法...