vue-router使用详解

这篇博客深入解析了Vue Router的使用,包括安装、路由模式(Hash和HTML5)、动态路由、嵌套路由、命名路由和命名视图、编程式导航、重定向和别名,以及导航守卫(全局、路由独享和组件级别)。文章通过实例展示了如何配置和应用这些特性,帮助开发者更好地理解和掌握Vue应用的路由管理。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

安装

yarn add vue-router

使用

HTML:

// App.vue

<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/vue-router@4"></script>

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!--使用 router-link 组件进行导航 -->
    <!--通过传递 `to` 来指定链接 -->
    <!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->
    <router-link to="/">Go to Home</router-link>
    <router-link to="/about">Go to About</router-link>
    
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>

自定义路由组件:

// /components/UserPost.vue

<template>
    <div>User {{this.$route.params}} with post {{this.$route.postId}}</div>
</template>

JavaScript:

// main.js

// 从vue-router引入createRouter和createWebHashHistory. 如果不引入的话,
// 使用VueRouter.createRouter()来使用
import {createRouter, createWebHashHistory} from 'vue-router'

// 1. 定义路由组件.
// 也可以从其他文件导入
// (1)直接定义路由组件
const Home = { template: '<div>Home</div>' }
const About = { template: '<div>About</div>' }
// (2)从其他组件导入
import UserPost from "./components/UserPost" //(/components/下有一个名为UserPost.vue文件)

// 2. 定义一些路由
// 每个路由都需要映射到一个组件。
// 我们后面再讨论嵌套路由。
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  { path: '/users/:username/posts/:postId', component: UserPost } // 此路由匹配 http://example.com/users/Jack/posts/123
]

// 3. 创建路由实例并传递 `routes` 配置
// 你可以在这里输入更多的配置,但我们在这里
// 暂时保持简单
const router = createRouter({
  // 4. 内部提供了 history 模式的实现。为了简单起见,我们在这里使用 hash 模式。
	history: createWebHashHistory(),
  routes, // `routes: routes`的缩写
})


// 5. 创建并挂载根实例
const app = Vue.createApp({})
//确保 _use_ 路由实例使
//整个应用支持路由。
app.use(router) // 此时,可以在任意组件中使用this.$router访问路由对象,并以this.$route的形式访问当前路由

app.mount('#app')

// 现在,应用已经启动了!

通过调用 app.use(router),我们可以在任意组件中以 this.$router 的形式访问它,并且以 this.$route 的形式访问当前路由:


路由模式

Vue Router默认采用URL hash模式来保持页面和URL的同步,其创建的URL格式需要包含井号(#),如下所示。
http://pwstrick.com/#/main

Vue Router还有另外一种history模式,利用HTML5 History来保持页面和URL的同步,其创建的URL格式在视觉上更为简洁清晰,如下所示。
http://pwstrick.com/main

在创建路由器实例时,history 配置允许我们在不同的历史模式中进行选择。

Hash 模式

hash 模式是用 createWebHashHistory() 创建的:

import { createRouter, createWebHashHistory } from 'vue-router'

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    //...
  ],
})

它在内部传递的实际 URL 之前使用了一个哈希字符(#)。由于这部分 URL 从未被发送到服务器,所以它不需要在服务器层面上进行任何特殊处理。不过,它在 SEO 中确实有不好的影响。如果你担心这个问题,可以使用 HTML5 模式。

HTML5 模式

用 createWebHistory() 创建 HTML5 模式,推荐使用这个模式:

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

const router = createRouter({
  history: createWebHistory(),
  routes: [
    //...
  ],
})

当使用这种历史模式时,URL 会看起来很 “正常”,例如 https://example.com/user/id。

不过,问题来了。由于我们的应用是一个单页的客户端应用,如果没有适当的服务器配置,用户在浏览器中直接访问 https://example.com/user/id,就会得到一个 404 错误。这就丑了。

不用担心:要解决这个问题,你需要做的就是在你的服务器上添加一个简单的回退路由。如果 URL 不匹配任何静态资源,它应提供与你的应用程序中的 index.html 相同的页面。漂亮依旧!
具体见vue router文档-不同的历史记录模式-服务器配置实例部分。

动态路由

Vue Router采用的路径匹配引擎是path-to-regexp,它支持动态路由的匹配,例如有一个List组件,需要根据路径中的页码参数把组件渲染成不同的内容,可以像下面这样配置。

const List = { template: '<div>{{$route.params.page}}</div>' };
const routes = [
  { path: '/list/:page', component: List }
];

在路由配置中,以冒号开头的:page是路径参数,它的值会被保存到路由对象$route的params属性中。路由对象不仅包含解析URL得到的信息(例如路径、查询字符串、锚点等),还有匹配到的路由信息(例如路由名称、路由记录等)。当路径是/list/1时,$route.params的值为{page: 1},params是一个对象,其键值与路径参数对应。注意,一条路径可以包含多个不同的路径参数,比如http://example.com/users/Jack/posts/123对应的路由的params为{username: Jack, postId: 123}。

匹配模式匹配路径$route.params
/users/:username/users/eduardo{ username: ‘eduardo’ }
/users/:username/posts/:postId/users/eduardo/posts/123{ username: ‘eduardo’, postId: ‘123’ }

嵌套路由

一个被渲染的组件也可以包含自己嵌套的 <router-view>。例如,如果我们在 User 组件的模板内添加一个 <router-view>

// html

<div id="app">
  <router-view></router-view>
</div>
// js

const User = {
  template: '<div>User {{ $route.params.id }}</div>',
}

// 这些都会传递给 `createRouter`
const routes = [{ path: '/user/:id', component: User }]

// User模板

const User = {
  template: `
    <div class="user">
      <h2>User {{ $route.params.id }}</h2>
      <router-view></router-view>
    </div>
  `,
}

要将组件渲染到这个嵌套的 router-view 中,我们需要在路由中配置 children属性(和path, component同级):

const routes = [
  {
    path: '/user/:id',
    component: User,
    children: [
      {
        // 当 /user/:id/profile 匹配成功 
        // UserProfile 将被渲染到 User 的 <router-view> 内部
        path: 'profile',
        component: UserProfile,
      },
      {
        // 当 /user/:id/posts 匹配成功
        // UserPosts 将被渲染到 User 的 <router-view> 内部
        path: 'posts',
        component: UserPosts,
      },
    ],
  },
]

注意,以 / 开头的嵌套路径将被视为根路径。这允许你利用组件嵌套,而不必使用嵌套的 URL。
如你所见,children 配置只是另一个路由数组,就像 routes 本身一样。因此,你可以根据自己的需要,不断地嵌套视图。
此时,按照上面的配置,当你访问 /user/eduardo 时,在 User 的 router-view 里面什么都不会呈现,因为没有匹配到嵌套路由。也许你确实想在那里渲染一些东西。在这种情况下,你可以提供一个空的嵌套路径:

// 没有匹配到路由时,可以给children提供空的嵌套路径

const routes = [
  {
    path: '/user/:id',
    component: User,
    children: [
      // UserHome will be rendered inside User's <router-view>
      // when /user/:id is matched
      // 当 /user/:id 匹配成功
      // UserHome 将被渲染到 User 的 <router-view> 内部
      { path: '', component: UserHome },

      // ...其他子路由
    ],
  },
]

命名路由

可以在配置时为路由标识一个名称,从而就能在使用时省略路径了(否则需要指定的to属性为path指向的路径,如<router-link :to="/about"></router-link>)。
如下所示,name属性的值就是路由名称。

const routes = [
  {
    path: '/user/:username',
    name: 'user',
    component: User
  }
]

要链接到一个命名的路由,可以向 router-link 组件的 to 属性传递一个对象:

<router-link :to="{ name: 'user', params: { username: 'erina' }}">
  User
</router-link>

这跟代码调用 router.push() 是一回事:

router.push({ name: 'user', params: { username: 'erina' } })

在这两种情况下,路由将导航到路径 /user/erina。

命名视图

有时候想同时 (同级) 展示多个视图,而不是嵌套展示,例如创建一个布局,有 sidebar (侧导航) 和 main (主内容) 两个视图,这个时候命名视图就派上用场了。如果 router-view 没有设置名字,那么默认为 default。
即页面上有多个router-view,给每个router-view指定name,让它匹配对应的路由组件。

// html

<router-view class="view left-sidebar" name="LeftSidebar"></router-view> // 匹配LeftSidebar组件
<router-view class="view main-content"></router-view> // 匹配默认组件
<router-view class="view right-sidebar" name="RightSidebar"></router-view> // 匹配RightSidebar组件

一个视图使用一个组件渲染,因此对于同个路由,多个视图就需要多个组件。确保正确使用 components 配置 (带上 s):

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/',
      components: {
        default: Home,
        // LeftSidebar: LeftSidebar 的缩写
        LeftSidebar,
        // 它们与 `<router-view>` 上的 `name` 属性匹配
        RightSidebar,
      },
    },
  ],
})

嵌套命名视图见 vue router文档-命名视图-嵌套命名视图部分。


编程式导航

除了使用 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现。

导航到不同的位置

注意:在 Vue 实例中,你可以通过 r o u t e r 访 问 路 由 实 例 。 因 此 你 可 以 调 用 t h i s . router 访问路由实例。因此你可以调用 this. router访this.router.push。
想要导航到不同的 URL,可以使用 router.push 方法。这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,会回到之前的 URL。
当你点击 时,内部会调用这个方法,所以点击 相当于调用 router.push(…) :

声明式编程式
<router-link :to="...">router.push(…)

该方法的参数可以是一个字符串路径,或者一个描述地址的对象。例如:

// 字符串路径
router.push('/users/eduardo')

// 带有路径的对象
router.push({ path: '/users/eduardo' })

// 命名的路由,并加上参数,让路由建立 url
router.push({ name: 'user', params: { username: 'eduardo' } })

// 带查询参数,结果是 /register?plan=private
router.push({ path: '/register', query: { plan: 'private' } })

// 带 hash,结果是 /about#team
router.push({ path: '/about', hash: '#team' })

重定向和别名

重定向

重定向是指当用户访问 /home 时,URL 会被 / 替换,然后匹配成 /。
在路由配置中,通过redirect选项可重定向到一个新的页面,该选项可取的值有三种,分别是路径、命名路由和回调函数,如下所示,其中函数中的to参数表示目标路由对象。

// router.js

// 配置路由对象数组routes时

// redirect值为路径
const routes = [{ path: '/home', redirect: '/' }] // 当访问url为/home时,自动重定向到/

// redirect值为命名路由
const routes = [{ path: '/home', redirect: { name: 'homepage' } }]

// redirect值为方法(回调函数)
const routes = [
  {
    // /search/screens -> /search?q=screens
    path: '/search/:searchText',
    redirect: to => {
      // 方法接收目标路由作为参数
      // return 重定向的字符串路径/路径对象
      return { path: '/search', query: { q: to.params.searchText } }
    },
  },
  {
    path: '/search',
    // ...
  },
]

别名

将 / 别名为 /home,意味着当用户访问 /home 时,浏览器地址栏URL 仍然是 /home,但会被匹配为用户正在访问 /。
例如,路由配置为:

const routes = [{ path: '/', component: Homepage, alias: '/home' }]

导航守卫

导航守卫就是路由跳转过程中的一些钩子函数,再直白点路由跳转是一个大的过程,这个大的过程分为跳转前中后等等细小的过程,在每一个过程中都有一函数,这个函数能让你操作一些其他的事儿的时机,这就是导航守卫。
Vue Router提供了三类守卫:全局、路由独享和组件级。

全局守卫

全局守卫是指路由实例上直接操作的钩子函数,他的特点是所有路由配置的组件都会触发,直白点就是触发路由就会触发这些钩子函数,如下的写法。钩子函数按执行顺序包括beforeEach、beforeResolve、afterEach三个(以下的钩子函数都是按执行顺序讲解的):

全局前置守卫 beforeEach()

在路由跳转前触发,参数包括to,from,next(参数会单独介绍)三个,其中to是目标路由对象、from是来源路由对象,next是一个回调函数,用于解析(resolve)当前守卫。这个钩子作用主要是用于登录验证,也就是路由还没跳转提前告知,以免跳转了再通知就为时已晚。

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

全局解析守卫 beforeResolve()

这个钩子和beforeEach类似,也是路由跳转前触发,参数也是to,from,next三个,和beforeEach区别官方解释为:

确保在导航被确认之前,同时在所有组件内守卫和异步路由组件被解析之后,解析守卫就被正确调用

即在 beforeEach 和 组件内beforeRouteEnter 之后,afterEach之前调用。

全局后置钩子 afterEach()

和beforeEach相反,他是在路由跳转完成后触发,参数包括to,from没有了next(参数会单独介绍),他发生在beforeEach和beforeResolve之后,beforeRouteEnter(组件内守卫,后讲)之前。

路由独享的守卫

路由独享的守卫是指在单个路由配置的时候也可以设置的钩子函数,其位置就是下面示例中的位置,也就是像Foo这样的组件都存在这样的钩子函数。目前他只有一个钩子函数beforeEnter:

const routes = [
  {
    path: '/users/:id',
    component: UserDetails,
    beforeEnter: (to, from) => {
      // reject the navigation
      return false
    },
  },
]

beforeEnter 守卫 只在进入路由时触发,不会在 params、query 或 hash 改变时触发。例如,从 /users/2 进入到 /users/3 或者从 /users/2#info 进入到 /users/2#projects。它们只有在 从一个不同的 路由导航时,才会被触发。

组件守卫

可以在路由组件内直接定义路由导航守卫(传递给路由配置的)。可以为路由组件添加以下配置:

  • beforeRouteEnter
  • beforeRouteUpdate
  • beforeRouteLeave
const UserDetails = {
  template: `...`,
  beforeRouteEnter(to, from) {
    // 在渲染该组件的对应路由被验证前调用
    // 不能获取组件实例 `this` !
    // 因为当守卫执行时,组件实例还没被创建!
  },
  beforeRouteUpdate(to, from) {
    // 在当前路由改变,但是该组件被复用时调用
    // 举例来说,对于一个带有动态参数的路径 `/users/:id`,在 `/users/1` 和 `/users/2` 之间跳转的时候,
    // 由于会渲染同样的 `UserDetails` 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 因为在这种情况发生的时候,组件已经挂载好了,导航守卫可以访问组件实例 `this`
  },
  beforeRouteLeave(to, from) {
    // 在导航离开渲染该组件的对应路由时调用
    // 与 `beforeRouteUpdate` 一样,它可以访问组件实例 `this`
  },
}

(1)beforeRouteEnter():由于该组件在导航确认前被调用,因此组件还未被创建,从而访问this无法得到组件实例。但next()函数能接收一个参数为组件实例的回调,如下所示。

const List = {
  beforeRouteEnter: function(to, from, next) {
    next(vm => { 
      //vm是组件实例
    });
  }
};

(2)beforeRouteUpdate():可通过this得到组件实例,当路由发生变化,但复用了一个组件时,会调用该守卫。例如一个路径为/list/:page的路由(如下配置所示),在将/list/1导航至list/2时,由于渲染的都是List组件,因此会调用beforeRouteUpdate()守卫。

const routes = [
  {
    path: "/list/:page",
    component: List
  }
];

(3)beforeRouteLeave():也可通过this得到组件实例,当路由改变,并且渲染的组件不同时,会调用该守卫。例如有两条路径/main和/list,分别对应Main和List组件,在List组件中声明了beforeRouteLeave()守卫(如下所示),当从/list导航至/main时,会弹出确认框,判断是否需要取消本次导航。

const List = {
  beforeRouteLeave: function(to, from, next) {
    const answer = window.confirm("是否离开当前页?");
    answer ? next() : next(false);
  }
};

导航守卫回调参数

to:目标路由对象;
from:即将要离开的路由对象;
next:他是最重要的一个参数,他相当于佛珠的线,把一个一个珠子逐个串起来。以下注意点务必牢记:

1.但凡涉及到有next参数的钩子,必须调用next() 才能继续往下执行下一个钩子,否则路由跳转等会停止。

2.如果要中断当前的导航要调用next(false)。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到from路由对应的地址。(主要用于登录验证不通过的处理)

3.当然next可以这样使用,next(’/’) 或者 next({ path: ‘/’ }): 跳转到一个不同的地址。意思是当前的导航被中断,然后进行一个新的导航。可传递的参数与router.push中选项一致。

4.在beforeRouteEnter钩子中next((vm)=>{})内接收的回调函数参数为当前组件的实例vm,这个回调函数在生命周期mounted之后调用,也就是,他是所有导航守卫和生命周期函数最后执行的那个钩子。

5.next(error): (v2.4.0+) 如果传入 next 的参数是一个 Error 实例,则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

完整的导航解析流程

  1. 导航被触发。
  2. 在失活的组件里调用 beforeRouteLeave 守卫。
  3. 调用全局的 beforeEach 守卫。
  4. 在重用的组件里调用 beforeRouteUpdate 守卫(2.2+)。
  5. 在路由配置里调用 beforeEnter。
  6. 解析异步路由组件。
  7. 在被激活的组件里调用 beforeRouteEnter。
  8. 调用全局的 beforeResolve 守卫(2.5+)。
  9. 导航被确认。
  10. 调用全局的 afterEach 钩子。
  11. 触发 DOM 更新。
  12. 调用 beforeRouteEnter 守卫中传给 next 的回调函数,创建好的组件实例会作为回调函数的参数传入。

参考:
Vue3 路由 | 菜鸟教程
Vue Router 官方教程
Vue躬行记(8)——Vue Router
vue-router导航守卫,不懂的来

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值