vue 路由

Vue.js 路由小结

概述

Vue.js 是一个流行的前端JavaScript框架,其中的路由功能允许我们构建单页面应用(SPA),而无需服务器端渲染。Vue Router 是官方推荐的路由管理库,它为我们提供了声明式的路由配置和导航解决方案。

基本使用

安装

首先,我们需要安装 Vue Router。在使用 Vue CLI 创建项目时,可以选择包含 Vue Router。如果已经有了 Vue 项目,可以通过 npm 安装:

npm install vue-router

创建路由

创建路由很简单,只需使用 VueRouter 对象的 routes 属性即可。例如:

import Vue from 'vue';

import VueRouter from 'vue-router';

Vue.use(VueRouter);

const routes = [

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

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

];

const router = new VueRouter({

routes, // (缩写) 等同于 routes: routes

});

使用路由

在 Vue 实例中,我们可以使用 <router-view> 组件来渲染匹配到的路由组件。然后,在我们的 HTML 模板中,我们可以使用 Vue Router 提供的导航组件,如 <router-link> 来创建链接。

<div id="app">

<router-view></router-view>

</div>

<nav>

<router-link to="/home">Home</router-link> |

<router-link to="/about">About</router-link>

</nav>

进阶配置

嵌套路由

Vue Router 支持嵌套路由,这在构建复杂的应用时很有用。我们可以在一个路由中定义另一个路由,这样就可以在一个页面上展示多个子视图。

const routes = [

{

path: '/parent',

component: ParentView,

children: [

{ path: 'child', component: ChildView },

{ path: 'other-child', component: OtherChildView },

],

},

];

命名路由

为了使路由更易于管理,我们可以为它们提供名称。这样,我们就可以在链接和重定向中使用这些名称,而不是硬编码路径。

const routes = [

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

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

];

路由参数

我们还可以在路由中使用参数。参数使用冒号 ( : ) 标记,当匹配到一个路由时,参数值会被设置到 this.$route.params ,可以在每个组件内使用。

const routes = [

{ path: '/user/:username', component: User },

];

// 在组件中访问参数

this.$route.params.username;

通配符路由

通配符路由允许我们匹配所有路径或以特定前缀开始的路径。当使用一个通配符时, $route.params 内会自动添加一个名为 pathMatch 参数,它包含了 URL 通过通配符被匹配的部分。

const routes = [

{ path: '*', component: NotFoundView }, // 匹配所有路径

{ path: '/user-*', component: User }, // 匹配以 '/user-' 开头的任意路径

];

导航守卫

Vue Router 还提供了导航守卫,可以在路由切换之前或之后执行一些操作。我们可以使用 beforeRouteEnter , beforeRouteUpdate , beforeRouteLeave 等钩子函数来实现各种逻辑。

历史模式

Vue Router 支持两种历史模式: hash 和 history 。默认情况下,Vue Router 使用 hash 模式,URL 以 # 开头。如果我们希望使用 history API 来实现无 hash 的 URL,可以在创建 router 实例时指定 mode: 'history' 。

总结

Vue Router 为 Vue.js 提供了强大的路由管理功能,使得构建单页面应用变得简单而高效。通过灵活地配置路由、使用命名路由和路由参数、以及利用导航守卫和历史模式,我们可以轻松地管理应用的状态和导航。

相关推荐
然我7 分钟前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子12 分钟前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹15 分钟前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器22 分钟前
指定阿里镜像原理
前端
枷锁—sha27 分钟前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha28 分钟前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜44 分钟前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
DanB241 小时前
html复习
javascript·microsoft·html
汉得数字平台1 小时前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹1 小时前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux