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

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

ztj100 2025-04-06 00:41 34 浏览 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 的核心功能,并能够应对大多数单页面应用的路由场景!

相关推荐

使用Python编写Ping监测程序(python 测验)

Ping是一种常用的网络诊断工具,它可以测试两台计算机之间的连通性;如果您需要监测某个IP地址的连通情况,可以使用Python编写一个Ping监测程序;本文将介绍如何使用Python编写Ping监测程...

批量ping!有了这个小工具,python再也香不了一点

号主:老杨丨11年资深网络工程师,更多网工提升干货,请关注公众号:网络工程师俱乐部下午好,我的网工朋友。在咱们网工的日常工作中,经常需要检测多个IP地址的连通性。不知道你是否也有这样的经历:对着电脑屏...

python之ping主机(python获取ping结果)

#coding=utf-8frompythonpingimportpingforiinrange(100,255):ip='192.168.1.'+...

网站安全提速秘籍!Nginx配置HTTPS+反向代理实战指南

太好了,你直接问到重点场景了:Nginx+HTTPS+反向代理,这个组合是现代Web架构中最常见的一种部署方式。咱们就从理论原理→实操配置→常见问题排查→高级玩法一层层剖开说,...

Vue开发中使用iframe(vue 使用iframe)

内容:iframe全屏显示...

Vue3项目实践-第五篇(改造登录页-Axios模拟请求数据)

本文将介绍以下内容:项目中的public目录和访问静态资源文件的方法使用json文件代替http模拟请求使用Axios直接访问json文件改造登录页,配合Axios进行登录请求,并...

Vue基础四——Vue-router配置子路由

我们上节课初步了解Vue-router的初步知识,也学会了基本的跳转,那我们这节课学习一下子菜单的路由方式,也叫子路由。子路由的情况一般用在一个页面有他的基础模版,然后它下面的页面都隶属于这个模版,只...

Vue3.0权限管理实现流程【实践】(vue权限管理系统教程)

作者:lxcan转发链接:https://segmentfault.com/a/1190000022431839一、整体思路...

swiper在vue中正确的使用方法(vue中如何使用swiper)

swiper是网页中非常强大的一款轮播插件,说是轮播插件都不恰当,因为它能做的事情太多了,swiper在vue下也是能用的,需要依赖专门的vue-swiper插件,因为vue是没有操作dom的逻辑的,...

Vue怎么实现权限管理?控制到按钮级别的权限怎么做?

在Vue项目中实现权限管理,尤其是控制到按钮级别的权限控制,通常包括以下几个方面:一、权限管理的层级划分...

【Vue3】保姆级毫无废话的进阶到实战教程 - 01

作为一个React、Vue双修选手,在Vue3逐渐稳定下来之后,是时候摸摸Vue3了。Vue3的变化不可谓不大,所以,本系列主要通过对Vue3中的一些BigChanges做...

Vue3开发极简入门(13):编程式导航路由

前面几节文章,写的都是配置路由。但是在实际项目中,下面这种路由导航的写法才是最常用的:比如登录页面,服务端校验成功后,跳转至系统功能页面;通过浏览器输入URL直接进入系统功能页面后,读取本地存储的To...

vue路由同页面重定向(vue路由重定向到外部url)

在Vue中,可以使用路由的重定向功能来实现同页面的重定向。首先,在路由配置文件(通常是`router/index.js`)中,定义一个新的路由,用于重定向到同一个页面。例如,我们可以定义一个名为`Re...

那个 Vue 的路由,路由是干什么用的?

在Vue里,路由就像“页面导航的指挥官”,专门负责管理页面(组件)的切换和显示逻辑。简单来说,它能让单页应用(SPA)像多页应用一样实现“不同URL对应不同页面”的效果,但整个过程不会刷新网页。一、路...

Vue3项目投屏功能开发!(vue投票功能)

最近接了个大屏项目,产品想在不同的显示器上展示大屏项目不同的页面,做出来的效果图大概长这样...

取消回复欢迎 发表评论: