百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术分类 > 正文

Vue开发之路由(vue的路由使用步骤)

ztj100 2025-04-06 00:41 38 浏览 0 评论

Vue 路由是构建单页面应用(SPA)的核心功能,主要通过 Vue Router 实现。以下是 Vue Router 的详细讲解,涵盖核心概念、用法和最佳实践。

一、Vue Router 核心概念

1. 路由的作用

SPA 页面切换:在不刷新页面的情况下动态加载不同组件。

URL 与组件映射:通过 URL 路径匹配对应的组件。

导航守卫:控制路由跳转的权限和逻辑。

路由参数传递:通过 URL 或路由对象传递数据。

二、快速上手 Vue Router

1. 安装

npm install vue-router@4 # Vue 3 使用 vue-router 4.x

2. 基础配置

在 src/router/index.js 中创建路由实例:

import { createRouter, createWebHistory } from 'vue-router';

// 1. 定义路由组件(或异步导入)

import Home from '../views/Home.vue';

import About from '../views/About.vue';

// 2. 定义路由规则

const routes = [

{ path: '/', component: Home },

{ path: '/about', component: About },

];

// 3. 创建路由实例

const router = createRouter({

history: createWebHistory(), // 使用 HTML5 模式(去掉 URL 中的 #)

routes,

});

export default router;

3. 挂载到 Vue 应用

在 main.js 中:

import { createApp } from 'vue';

import App from './App.vue';

import router from './router';

const app = createApp(App);

app.use(router); // 启用路由

app.mount('#app');

三、核心功能详解

1. 路由跳转

声明式导航:使用 组件(类似 标签)


编程式导航:通过 router 实例方法

// 在组件中

import { useRouter } from 'vue-router';

export default {

setup() {

const router = useRouter();

const goToAbout = () => {

router.push('/about'); // 跳转到 about 页面

// 或 router.replace('/about') (替换当前历史记录)

};

return { goToAbout };

},

};


2. 动态路由

通过 : 定义动态路径参数:

// 路由配置

{

path: '/user/:id',

component: User,

}

在组件中获取参数:

<script>

import { useRoute } from 'vue-router';

export default {

setup() {

const route = useRoute();

console.log(route.params.id); // 通过 Composition API 获取

return {};

},

};

</script>

3. 嵌套路由

通过 children 属性定义子路由:

const routes = [

{

path: '/user',

component: UserLayout,

children: [

{ path: '', component: UserHome }, // /user

{ path: 'profile', component: UserProfile }, // /user/profile

],

},

];

4. 命名路由

为路由定义唯一名称,简化跳转:

// 路由配置

{ path: '/settings', name: 'Settings', component: Settings }

跳转时使用名称:

router.push({ name: 'Settings' });

5. 路由懒加载

优化首屏加载速度,按需加载组件:

const routes = [

{

path: '/admin',

component: () => import('../views/Admin.vue'), // 动态导入

},

];

四、高级特性

1. 导航守卫(路由拦截)

全局前置守卫:验证权限或登录状态

router.beforeEach((to, from, next) => {

if (to.meta.requiresAuth && !isAuthenticated) {

next('/login'); // 重定向到登录页

} else {

next(); // 放行

}

});


路由独享守卫

{

path: '/admin',

component: Admin,

beforeEnter: (to, from, next) => { /* 逻辑 */ }

}


组件内守卫

export default {

beforeRouteEnter(to, from, next) { /* 进入前 */ },

beforeRouteUpdate(to, from, next) { /* 路由参数变化时 */ },

beforeRouteLeave(to, from, next) { /* 离开前 */ },

};


2. 路由元信息(Meta Fields)

附加自定义数据到路由:

{

path: '/dashboard',

component: Dashboard,

meta: { requiresAuth: true, title: '控制台' }

}

3. 路由过渡动画

通过 组件实现页面切换动画:

4. 滚动行为控制

定义路由跳转后的滚动位置:

const router = createRouter({

history: createWebHistory(),

routes,

scrollBehavior(to, from, savedPosition) {

if (savedPosition) {

return savedPosition; // 返回历史记录中的位置

} else {

return { top: 0 }; // 滚动到顶部

}

},

});

五、Vue Router 与 Vue 3 的配合

1. Composition API 支持

在 setup() 中使用路由:

import { useRoute, useRouter } from 'vue-router';

export default {

setup() {

const route = useRoute(); // 当前路由信息(类似 this.$route)

const router = useRouter(); // 路由实例(类似 this.$router)

return { route, router };

},

};

2. TypeScript 支持

Vue Router 4 提供完整的类型定义:

import { RouteRecordRaw } from 'vue-router';

const routes: RouteRecordRaw[] = [

{ path: '/', component: Home },

];

六、常见问题与解决方案

七、最佳实践

路由分层:将路由配置拆分为多个模块(如 authRoutes、adminRoutes)。

权限控制:结合全局守卫和路由元信息实现动态权限管理。

代码分割:对大型路由使用懒加载,提升首屏性能。

统一错误页:配置 404 页面捕获未匹配的路由:

{ path: '/:pathMatch(.*)*', component: NotFound }


八、学习资源

官方文档:[Vue Router 4 官方指南](
https://router.vuejs.org/zh/)

实战项目:尝试构建一个包含登录、权限管理和动态路由的 Admin 系统

调试工具:使用 [Vue Devtools](
https://devtools.vuejs.org/) 查看路由状态

通过以上内容,你可以系统掌握 Vue Router 的核心功能,并能够应对大多数单页面应用的路由场景!

相关推荐

人生苦短,我要在VSCode里面用Python

轻沉发自浅度寺量子位出品|公众号QbitAI在程序员圈子里,VisualStudioCode(以下简称VSCode)可以说是目前最火的代码编辑器之一了。它是微软出品的一款可扩展的轻量...

亲测可用:Pycharm2019.3专业版永久激活教程

概述随着2020年的到来,又有一批Pycharm的激活码到期了,各位同仁估计也是在到处搜索激活方案,在这里,笔者为大家收录了一个永久激活的方案,亲测可用,欢迎下载尝试:免责声明本项目只做个人学习研究之...

Python新手入门很简单(python教程入门)

我之前学习python走过很多的歧途,自学永远都是瞎猫碰死耗子一样,毫无头绪。后来心里一直都有一个做头条知识分享的梦,希望自己能够帮助曾经类似自己的人,于是我来了,每天更新5篇Python文章,喜欢的...

Pycharm的设置和基本使用(pycharm运行设置)

这篇文章,主要是针对刚开始学习python语言,不怎么会使用pycharm的童鞋们;我来带领大家详细了解下pycharm页面及常用的一些功能,让大家能通过此篇文章能快速的开始编写python代码。一...

依旧是25年最拔尖的PyTorch实用教程!堪比付费级内容!

我真的想知道作者到底咋把PyTorch教程整得这么牛的啊?明明在内容上已经足以成为付费教材了,但作者偏要免费开源给大家学习!...

手把手教你 在Pytorch框架上部署和测试关键点人脸检测项目DBFace

这期教向大家介绍仅仅1.3M的轻量级高精度的关键点人脸检测模型DBFace,并手把手教你如何在自己的电脑端进行部署和测试运行,运行时bug解决。01.前言前段时间DBFace人脸检测库横空出世,...

进入Python的世界02外篇-Pycharm配置Pyqt6

为什么这样配置,要开发带UI的python也只能这样了,安装过程如下:一安装工具打开终端:pipinstallPyQt6PyQt6-tools二打开设置并汉化点击plugin,安装汉化插件,...

vs code如何配置使用Anaconda(vscode调用anaconda库)

上一篇文章中(Anaconda使用完全指南),我们能介绍了Anaconda的安装和使用,以及如何在pycharm中配置Anaconda。本篇,将继续介绍在vscode中配置conda...

pycharm中conda解释器无法配置(pycharm配置anaconda解释器)

之前用的好好的pycharm正常配置解释器突然不能用了?可以显示有这个环境然后确认后可以conda正在配置解释器,但是进度条结束后还是不成功!!试过了pycharm重启,pycharm重装,anaco...

Volta:跨平台开发者的福音,统一前端js工具链从未如此简单!

我们都知道现在已经进入了Rust时代,不仅很多终端常用的工具都被rust重写了,而且现在很多前端工具也开始被Rust接手了,这不,现在就出现了一款JS工具管理工具,有了它,你可以管理多版本的js工具,...

开发者的福音,ElectronEgg: 新一代桌面应用开发框架

今天给大家介绍一个开源项目electron-egg。如果你是一个JS的前端开发人员,以前面对这项任务桌面应用开发在时,可能会感到无从下手,甚至觉得这是一项困难的挑战。ElectronEgg的出现,它能...

超强经得起考验的低代码开发平台Frappe

#挑战30天在头条写日记#开始进行管理软件的开发来讲,如果从头做起不是不可以,但选择一款免费的且经得起时间考验的低代码开发平台是非常有必要的,将大幅提升代码的质量、加快开发的效率、以及提高程序的扩展性...

一文带你搞懂Vue3 底层源码(vue3核心源码解析)

作者:妹红大大转发链接:https://mp.weixin.qq.com/s/D_PRIMAD6i225Pn-a_lzPA前言vue3出来有一段时间了。今天正式开始记录一下梗vue3.0.0-be...

Windows 11 + WSL2 打造轻量级 Linux 本地开发环境实战教程

一、前言...

基于小程序 DSL(微信、支付宝)的,可扩展的多端研发框架

Mor(发音为/mr/,类似more),是饿了么开发的一款基于小程序DSL的,可扩展的多端研发框架,使用小程序原生DSL构建,使用者只需书写一套(微信或支付宝)小程序,就可以通过Mor...

取消回复欢迎 发表评论: