中国建设银行公积金网缴网站,湖南省公共资源交易中心,培训机构网站建设要求,中石化胜利建设工程有限公司网站在构建现代化单页应用#xff08;SPA#xff09;时#xff0c;Vue3 凭借其简洁高效的特性成为众多开发者的首选。
而 Vue3 路由#xff08;Vue Router#xff09;则是 Vue3 生态中不可或缺的一部分#xff0c;它就像是单页应用的 “导航地图”#xff0c;帮助用户在不同…在构建现代化单页应用SPA时Vue3 凭借其简洁高效的特性成为众多开发者的首选。
而 Vue3 路由Vue Router则是 Vue3 生态中不可或缺的一部分它就像是单页应用的 “导航地图”帮助用户在不同的页面组件之间自由穿梭同时保证页面的流畅切换无需刷新整个网页。
一、Vue3 路由的基础概念
1. 什么是路由
路由可以简单理解为 “网址” 与 “页面内容组件” 之间的对应关系。
在传统的多页应用中每一个页面都是一个独立的 HTML 文件通过超链接跳转时浏览器会重新加载新的页面。而在单页应用里整个应用只有一个 HTML 文件通过路由来控制不同组件的显示与隐藏从而模拟出页面跳转的效果。
例如当用户访问 https://example.com/home 时显示首页组件访问 https://example.com/about 时显示关于我们的组件这就是路由在起作用。
2. Vue Router 的作用
Vue Router 是 Vue.js 官方的路由管理器专门为 Vue 应用开发设计。它不仅实现了 URL 与组件的映射还提供了诸如路由嵌套、路由守卫、动态路由等强大功能让开发者能够轻松构建复杂的单页应用架构提升用户体验。
二、Vue3 路由的安装与基本使用
1. 安装 Vue Router
在使用 Vue3 路由之前需要先安装它。如果你的项目是通过 npm 管理依赖可以在项目根目录下执行以下命令
npm install vue-router4如果你使用的是 yarn则执行
yarn add vue-router4这里安装的是 Vue Router 4 版本它完美适配 Vue3。
2. 创建路由实例
安装完成后在项目中创建一个路由文件例如 router.js。在该文件中引入必要的模块并创建路由实例代码如下
import { createRouter, createWebHistory } from vue-router;
import Home from ../views/Home.vue;
import About from ../views/About.vue;const routes [{path: /,name: Home,component: Home},{path: /about,name: About,component: About}
];const router createRouter({history: createWebHistory(),routes
});export default router;在这段代码中
首先从 vue-router 中引入 createRouter 和 createWebHistory 方法。createRouter 用于创建路由实例createWebHistory 用于创建基于 HTML5 History API 的路由模式这种模式下的 URL 更加简洁美观例如 https://example.com/about没有多余的哈希符号。接着引入了两个组件 Home 和 About它们将作为不同路由对应的显示内容。然后定义 routes 数组其中每个对象表示一条路由规则包含 path路由路径、name路由名称方便在代码中引用和 component对应的组件。最后通过 createRouter 方法创建路由实例并将配置好的 history 和 routes 传入再将路由实例导出以便在 Vue 应用中使用。
3. 在 Vue 应用中使用路由
在 main.js 文件中引入创建好的路由实例并将其挂载到 Vue 应用上
import { createApp } from vue;
import App from ./App.vue;
import router from ./router;const app createApp(App);
app.use(router);
app.mount(#app);这样路由就已经集成到 Vue 应用中了。在 App.vue 文件中可以使用 router-view 组件来显示当前路由对应的组件内容例如
templatediv idapprouter-view/router-view/div
/template同时还可以使用 router-link 组件来创建导航链接代替传统的 a 标签例如
templatediv idapprouter-link to/Home/router-link |router-link to/aboutAbout/router-linkrouter-view/router-view/div
/template此时点击这些链接页面会在不刷新的情况下显示对应的组件内容。 三、Vue3 路由的进阶功能
1. 动态路由
在实际应用中经常会遇到需要传递参数的路由例如显示用户详情页每个用户都有一个唯一的 ID。这时就可以使用动态路由在路由路径中使用参数示例如下
const routes [{path: /user/:id,name: User,component: User}
];在上述代码中:id 就是一个动态参数。当用户访问 https://example.com/user/1 时1 这个值会被传递到 User 组件中。在 User 组件中可以通过 this.$route.params.id在选项式 API 中或 useRoute().params.id在组合式 API 中来获取这个参数值。
2. 路由嵌套
有些页面的结构比较复杂包含多个子页面这时候就需要用到路由嵌套。例如在一个博客应用中文章详情页可能还包含评论区、相关文章推荐等子模块每个子模块可以对应一个子路由。路由嵌套的配置方式如下
const routes [{path: /article,name: Article,component: Article,children: [{path: :id,name: ArticleDetail,component: ArticleDetail},{path: :id/comments,name: ArticleComments,component: ArticleComments}]}
];在上述代码中children 数组定义了 Article 组件的子路由。访问 https://example.com/article/1 会显示 ArticleDetail 组件访问 https://example.com/article/1/comments 会显示 ArticleComments 组件。
在 Article.vue 组件中同样需要使用 router-view 来显示子路由对应的内容。
3. 路由守卫
路由守卫用于在路由跳转的不同阶段执行一些自定义逻辑例如验证用户登录状态、记录页面访问日志等。常见的路由守卫有全局守卫、路由独享守卫和组件内守卫。
全局守卫在 router.js 文件中可以定义全局前置守卫 router.beforeEach 和全局后置钩子 router.afterEach。例如使用全局前置守卫来验证用户是否登录
router.beforeEach((to, from, next) {const isLoggedIn localStorage.getItem(isLoggedIn);if (to.meta.requiresAuth !isLoggedIn) {next(/login);} else {next();}
});上述代码中to 表示即将要进入的目标路由对象from 表示当前导航正要离开的路由next 是一个函数调用 next() 表示放行继续跳转调用 next(/login) 表示将导航重定向到 /login 路由。
路由独享守卫在路由配置中可以为每条路由单独设置守卫例如
const routes [{path: /admin,name: Admin,component: Admin,beforeEnter: (to, from, next) {// 执行自定义逻辑next();}}
];组件内守卫在组件内部定义 beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave 方法用于在组件的路由相关操作时执行逻辑。
