当前位置：首页 > news >正文

Vue：路由管理vue-router

news 来源：原创 2024/9/29 13:21:19

Vue Router 是 Vue 官方的客户端路由解决方案，可以通过配置路由来告诉 Vue Router 为每个 URL 路径显示哪些组件。

1. Vue3 中使用 vue-router

安装

npm install vue-router@4

创建路由配置文件

新建 router/index.js 文件按用来统一管理路由配置。

// router/index.js
import { createRouter, createWebHistory } from "vue-router";const router = createRouter({history: createWebHistory(),routes: [{path: '/',component: () => import("@/views/Home"),},{path: '/user',component: () => import("@/views/User"),}]
})export default router;

在 main.js 中注册路由

// main.jsimport { createApp } from 'vue'
import router from './router'
import App from './app.vue'const app = createApp(App)
app.use(router).mount('#app')

在组件中使用路由

<!-- App.vue -->
<template><nav><router-link to="/">首页</router-link><router-link to="/user">用户</router-link></nav><main><router-view /></main></template>

2. 路由配置

动态路由匹配

// router/index.jsconst routes = [{path: '/user/:id',component: User,}
]

路径参数用冒号 : 表示。当一个路由被匹配时（/user/123），它的 params 的值可以使用 useRoute() 钩子函数获取。

<!-- User.vue -->
<script setup>
import { useRoute } from 'vue-router'const route = useRoute();
console.log(route.params);		// {id: 123}
</script>

使用带有参数的路由时需要注意的是，当用户从 /users/122 导航到 /users/123 时，相同的组件实例将被重复使用，从而组件的生命周期钩子不会被调用。

要对同一个组件中参数的变化做出响应的话，可以使用 watch 监听 route.params。

嵌套路由

const routes = [{path: '/user/:id',component: User,children: [{        path: '',				// 当 /user/:id 匹配成功component: UserHome,	// UserHome 将被渲染到 User 的 <router-view> 内部},{        path: 'posts',			// 当 /user/:id/posts 匹配成功component: UserPosts,	// UserPosts 将被渲染到 User 的 <router-view> 内部},],},
]

注意：子路由的 path 属性中不可以带 /，否则无法匹配。

<!-- User.vue -->
<template><div>{{ route.params.id }}</div><router-view />
</template>

3. 路由导航

<script setup>
import { useRouter } from 'vue-router'const router = useRouter()
router.push()		// 导航
router.replace()	// 替换
router.go(1)		// 返回上一条记录
</script>

传参

const username = 'eduardo'router.push(`/user/${username}`) 		// -> /user/eduardorouter.push({ path: `/user/${username}` }) 	// -> /user/eduardo// 命名路由
router.push({ name: 'user', params: { username } }) 	// -> /user/eduardo// `params` 不能与 `path` 一起使用
router.push({ path: '/user', params: { username } }) 	// -> /user// 带查询参数
router.push({ path: '/user', query: { username } })		// -> /user?username=eduardo

4. 导航守卫

vue-router 提供的导航守卫主要用于在路由导航过程中添加一些额外的逻辑，如权限验证、数据获取等。它允许你在路由发生变化的不同阶段插入自定义的代码片段，从而控制路由的跳转和取消。

全局前置守卫

router.beforeEach 用于在路由跳转前执行一些逻辑，例如身份验证。当一个导航触发时，全局前置守卫按照创建顺序调用。

// router/index.js
const router = createRouter({ ... })router.beforeEach(async (to, from) => {if (!isAuthenticated && to.path !== '/login'){return '/login'				// 检查用户是否已登录，否则重定向到登录页面}
})