vue-router

前端开发 2024-12-26 3

Vue Router 是 Vue.js 官方推出的路由办理器。它答应开发者界说一个路由表，经过改动 URL 来改动视图，完成单页运用（SPA）的页面切换。Vue Router 供给了丰厚的功用，如路由嵌套、动态路由匹配、路由护卫等，使得开发者能够愈加方便地构建单页运用。

中心概念

1. 路由：一个路由是一个映射联系，它告知 Vue Router 怎么响运用户的 URL 恳求。每个路由都映射到一个组件，这个组件会烘托在页面上。2. 路由器：Vue Router 实例，它办理着一切的路由。3. 路由护卫：能够在路由跳转前后履行代码，用于权限验证、页面初始化等。4. 动态路由：依据 URL 参数动态烘托不同的组件。5. 路由嵌套：一个路由能够包括多个子路由，子路由的组件会被烘托在父路由的组件内部。

装置

```bashnpm install vuerouter```

根本用法

```javascriptimport Vue from 'vue'import VueRouter from 'vuerouter'import Home from './components/Home.vue'import About from './components/About.vue'

Vue.use

const routes =

const router = new VueRouter

new Vue}qwe2```

路由导航

```javascript// 声明式导航About

// 编程式导航router.push```

路由护卫

```javascript// 大局前置护卫router.beforeEach => { if qwe2 { if qwe2 { next } else { next } } else { next }}qwe2

// 路由独享的护卫const router = new VueRouter => { // ... } } qwe2}qwe2

// 组件内的护卫export default { beforeRouteEnter { // 在烘托该组件的对应路由被 confirm 前调用 // 不！能！获取组件实例 `this` // 因为当护卫履行前，组件实例还没被创立 }, beforeRouteUpdate { // 在当前路由改动，可是该组件被复用时调用 // 举例来说，关于一个带有动态参数的路由 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时分， // 因为会烘托相同的 Foo 组件，因而组件实例会被复用。而这个钩子就会在这个情况下被调用。 // 能够拜访到的组件实例 `this` }, beforeRouteLeave { // 导航脱离该组件的对应路由时调用 // 能够拜访到的组件实例 `this` }}```

动态路由匹配

```javascriptconst User = { template: 'User {{ $route.params.id }}'}

const router = new VueRouter}qwe2```

路由嵌套

```javascriptconst router = new VueRouter } qwe2}qwe2```

路由懒加载

```javascriptconst router = new VueRouter => import } qwe2}qwe2```

Vue Router 是一个功用强大的路由办理器，它为 Vue.js 开发者供给了灵敏的路由解决方案。经过把握 Vue Router 的根本用法和高档特性，开发者能够愈加高效地构建单页运用。

Vue Router：浅显易懂前端路由办理

跟着前端运用的日益杂乱，路由办理成为了前端开发中不可或缺的一部分。Vue Router 是 Vue.js 官方引荐的路由办理器，它能够协助咱们轻松完成单页面运用（SPA）的路由跳转和页面切换。本文将浅显易懂地介绍 Vue Router 的根本概念、装置装备、运用方法以及高档特性。