admin 管理员组文章数量: 887021
在现代前端开发中，路由（Routing）是构建单页应用程序（SPA）的核心概念之一。他允许应用根据URL的变化动态地渲染不同的组件或页面。Vue.js提供了官方的路由管理工具——Vue Router。接下来这篇文章将逐步讲解Vue 3 中的路由概念。
什么是路由？
路由其实就是URL与应用程序视图之间的映射关系。
在传统的多页应用里面，每次跳转都是向服务器发送请求，服务器返回新的页面的过程。但是在SPA中，页面并不会刷新，而是根据URL的变化，动态地 加载相应的组件，为实现这一效果，就需要路由系统的管理。
Vue Router 的核心概念
1.路由器（Router）
这个路由器并不是网络服务中用于转发路由的路由器，而是SPA中路由系统的核心的控制页面映射的路由器。
它的功能包括：
- 监听URL的变化
- 根据定义的 路由规则，映射到对应的组件。
- 提供导航方法，控制页面跳转。
2.路由（Route）
路由是路径（Path）与组件（compontent）的对应关系。
一个典型的路由定义包括：
path：URL当中的路径部分compontent:当路径匹配时要渲染的组件
3. 路由视图（Router View）
是一个占位组件，告诉 Vue Router 在这里渲染匹配到的组件。
4. 路由链接（Router Link）
组件用于创建导航链接，点击后会改变 URL，并触发路由跳转。
5. 动态路由和参数
动态路由允许在路径中使用变量，例如 /user/:id。可以通过路由参数访问这些变量。
6. 嵌套路由
嵌套路由用于构建具有层级关系的页面结构，即在一个组件内部再嵌套另一个路由视图。
7. 导航守卫
导航守卫用于在路由跳转前、跳转后或解析过程中，添加自定义的逻辑处理，例如权限验证。
三、如何在 Vue 3 中使用 Vue Router
1. 安装 Vue Router
在开始之前，需要安装 Vue Router：
npm install vue-router@4
2. 创建路由器实例
在项目的入口文件（如 main.js）中：
import { createApp } from 'vue';
import { createRouter, createWebHistory } from 'vue-router';
import App from './App.vue';
// 导入需要的组件
import Home from './components/Home.vue';
import About from './components/About.vue';
// 定义路由
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About },
];
// 创建路由器实例
const router = createRouter({
history: createWebHistory(), // 使用 HTML5 模式
routes, // 路由配置
});
// 创建并挂载应用
const app = createApp(App);
app.use(router);
app.mount('#app');
3. 定义路由组件
在 components 目录下创建 Home.vue 和 About.vue：
<!-- Home.vue -->
<template>
<div>
<h1>首页</h1>
</div>
</template>
<script>
export default {
name: 'Home',
};
</script>
<!-- About.vue -->
<template>
<div>
<h1>关于我们</h1>
</div>
</template>
<script>
export default {
name: 'About',
};
</script>
4. 使用 <router-view> 显示路由组件
在 App.vue 中：
<template>
<div id="app">
<nav>
<router-link to="/">首页</router-link>
|
<router-link to="/about">关于我们</router-link>
</nav>
<router-view></router-view>
</div>
</template>
5. 路由跳转
使用 <router-link> 创建导航链接，或者在脚本中使用编程式导航：
// 在组件内部
export default {
methods: {
goToAbout() {
this.$router.push('/about');
},
},
};
四、进阶概念
1. 动态路由匹配
定义动态路由：
const routes = [
{ path: '/user/:id', component: User },
];
在组件中获取路由参数：
import { useRoute } from 'vue-router';
export default {
setup() {
const route = useRoute();
const userId = route.params.id;
return {
userId,
};
},
};
2. 嵌套路由
定义嵌套路由：
const routes = [
{
path: '/user/:id',
component: User,
children: [
{
path: 'profile',
component: UserProfile,
},
{
path: 'posts',
component: UserPosts,
},
],
},
];
在父组件模板中：
<template>
<div>
<h2>用户页面</h2>
<router-view></router-view> <!-- 渲染子路由组件 -->
</div>
</template>
3. 导航守卫
全局前置守卫：
router.beforeEach((to, from, next) => {
// 例如，验证用户是否已登录
if (to.path === '/protected' && !isLoggedIn()) {
next('/login');
} else {
next();
}
});
路由独享守卫：
const routes = [
{
path: '/admin',
component: Admin,
beforeEnter: (to, from, next) => {
// 仅管理员可访问
if (isAdmin()) {
next();
} else {
next('/login');
}
},
},
];
组件内守卫：
export default {
beforeRouteEnter(to, from, next) {
// 在路由进入前调用
next();
},
beforeRouteUpdate(to, from, next) {
// 在当前路由改变，但组件被复用时调用
next();
},
beforeRouteLeave(to, from, next) {
// 在路由离开前调用
next();
},
};
4. 懒加载路由
通过动态导入实现路由组件的懒加载：
const routes = [
{
path: '/about',
component: () => import('./components/About.vue'),
},
];
5. 命名路由和命名视图
命名路由：
const routes = [
{
path: '/user/:id',
name: 'user',
component: User,
},
];
// 导航到命名路由
this.$router.push({ name: 'user', params: { id: 123 } });
命名视图：
const routes = [
{
path: '/views',
components: {
default: ViewMain,
sidebar: ViewSidebar,
},
},
];
// 在模板中
<template>
<router-view></router-view>
<router-view name="sidebar"></router-view>
</template>
版权声明：本文标题：Vue 3中的路由（Router）详解 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1727801367h1169066.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论