【vue教程】五. Vue 的路由管理
子羽bro 2024-08-29 09:03:23 阅读 61
目录
往期列表本章涵盖知识点回顾Vue Router 的基本概念什么是 Vue Router？为什么需要 Vue Router？
路由的配置和使用安装 Vue Router创建路由在 Vue 实例中使用路由模板中的路由链接
动态路由和嵌套路由动态路由嵌套路由
路由守卫什么是路由守卫？全局路由守卫组件内路由守卫
实例演示创建一个简单的 SPA
结语
往期列表
【vue教程】一. 环境搭建与代码规范配置【vue教程】二. Vue特性原理详解【vue教程】三. 组件复用和通信(7 种方式)【vue教程】四. Vue 计算属性和侦听器
本章涵盖知识点
Vue Router 的基本概念路由的配置和使用动态路由和嵌套路由路由守卫
回顾
在第四篇文章中，我们详细探讨了 Vue 的计算属性和侦听器，以及生命周期钩子函数。我们了解到计算属性如何基于它们的依赖进行缓存，侦听器如何帮助我们观察和响应 Vue 实例上的数据变化。
<code>正文开始 ，
如果觉得文章对您有帮助，请帮我三连+订阅，谢谢💖💖💖
Vue Router 的基本概念
什么是 Vue Router？
Vue Router 是 Vue 官方的路由管理器，用于构建单页面应用。它允许你通过 URL 来映射不同的组件，实现页面的动态加载和导航。
为什么需要 Vue Router？
在现代 Web 应用中，用户期望页面能够快速响应，无需重新加载整个页面。Vue Router 通过前端路由解决了这个问题，它使得组件的切换变得无缝，提升了用户体验。
路由的配置和使用
安装 Vue Router
首先，你需要安装 Vue Router：
npm install vue-router
创建路由
在 Vue Router 中，路由是通过router.addRoute方法配置的：
// router.js
import Vue from "vue";
import Router from "vue-router";
import Home from "@/components/Home";
import About from "@/components/About";
Vue.use(Router);
export default new Router({
routes: [
{
path: "/",
name: "Home",
component: Home,
},
{
path: "/about",
name: "About",
component: About,
},
],
});
在 Vue 实例中使用路由
// main.js
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
new Vue({
router,
render: (h) => h(App),
}).$mount("#app");
模板中的路由链接
在 Vue 模板中，你可以使用<router-link>来创建导航链接：
<router-link to="/home">Home</router-link>code>
<router-link to="/about">About</router-link>code>
动态路由和嵌套路由
动态路由
动态路由是指路由的某些部分是动态的，例如用户 ID 或文章的 slug：
{
path: '/user/:id',
name: 'User',
component: User
}
嵌套路由
Vue Router 支持嵌套路由，这使得你可以创建模块化的组件结构：
{
path: '/dashboard',
component: Dashboard,
children: [
{
path: 'posts',
component: Posts
},
{
path: 'users',
component: Users
}
]
}
路由守卫
什么是路由守卫？
路由守卫用于在路由跳转前后执行代码，可以用来检查用户认证状态、获取数据等。
全局路由守卫
router.beforeEach((to, from, next) => {
if (to.path === "/login" && isUserAuthenticated()) {
next({ path: "/" });
} else {
next();
}
});
组件内路由守卫
export default {
beforeRouteEnter(to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
},
beforeRouteUpdate(to, from, next) {
// 在当前路由改变，但是该组件被复用时调用
},
beforeRouteLeave(to, from, next) {
// 导航离开该组件的对应路由时调用
},
};
实例演示
创建一个简单的 SPA
我们将创建一个简单的单页面应用，包含首页、关于页和用户个人页。
安装 Vue Router：
npm install vue-router
配置路由：
// router.js
import Vue from "vue";
import Router from "vue-router";
import Home from "@/components/Home";
import About from "@/components/About";
import User from "@/components/User";
Vue.use(Router);
export default new Router({
mode: "history",
routes: [
{ path: "/", component: Home },
{ path: "/about", component: About },
{ path: "/user/:id", component: User },
],
});
在 Vue 实例中使用路由：
// main.js
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
new Vue({
router,
render: (h) => h(App),
}).$mount("#app");
模板中的路由链接：
<!-- App.vue -->
<template>
<div id="app">code>
<router-link to="/" exact>Home</router-link>code>
<router-link to="/about">About</router-link>code>
<router-link to="/user/1">User 1</router-link>code>
<router-view></router-view>
</div>
</template>
结语
通过本篇文章，我们学习了 Vue Router 的基本概念、配置和使用，以及如何实现动态路由和嵌套路由。我们还探讨了路由守卫的概念，并提供了如何在 Vue 组件中使用它们的示例。这些知识点将帮助你构建一个功能完备的单页面应用。
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。