Vue路由

一、路由的定义

Vue路由是指在使用Vue.js框架构建的单页面应用程序（SPA）中，管理和控制页面视图切换的一种机制。它是Vue.js生态系统中的一个重要组成部分，通过Vue Router这个官方的路由管理器来实现。Vue路由允许开发者定义多个路由规则，每个路由规则都对应一个组件，当用户访问特定的URL时，Vue Router会根据这些规则动态地将对应的组件渲染到视图中，从而实现无刷新的页面跳转和数据更新。

具体来说，Vue路由的定义可以如下：

Vue路由是Vue Router提供的一种用于单页面应用程序的路径到组件的映射系统。它允许开发者为不同的路径定义对应的组件，并在用户导航到这些路径时，自动加载和渲染相应的组件。Vue路由通过维护一个路由视图历史记录，支持前进、后退等导航操作，同时还提供了路由守卫等高级功能，以实现细粒度的路由控制和安全检查。

二、vue-router 使用

1，安装 Vue Router

npm install vue-router
# 或者
yarn add vue-router

2，创建路由实例导入Vue

//创建路由器对象，以及管理路由器配置
//引入一个函数
import {createRouter,createWebHistory,createWebHashHistory} from "vue-router";

3，定义路由

定义一些路由组件，然后创建路由配置数组，每个路由映射一个组件

const routes = [
    {
        path:"/about",
        component :()=>import("@/views/About.vue"),
        name:"about",
    }
]

4,创建路由器实例并传递routes

//创建路由器对象
const router= createRouter({
    history:createWebHistory(process.env.BASE_URL),
    routes:routes,
    linkActiveClass:'active',
})

5,创建和挂载根实例

createApp(App).use(router).mount('#app')

6,在Vue组件中使用<router-view/>和<router-link/>

在你的应用组件（通常是App.vue）中使用<router-view/>作为路由组件的出口，使用<router-link/>作为导航链接。

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

  <router-view></router-view>

三、基本路由配置

一个基本的路由配置包含path和component属性，分别代表路由的路径和要渲染的组件。

import Vue from 'vue'
import Router from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home', // 可选，给路由命名
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

嵌套路由

嵌套路由用于在父组件内部渲染子组件。

{
  path: '/parent',
  component: Parent,
  children: [
    {
      path: 'child',
      component: Child
    }
  ]
}

路由重定向

路由重定向可以通过redirect属性实现。

{
  path: '/home',
  redirect: '/'
}

路由别名

别名可以给同一个组件定义多个路径。

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

四、路由守卫

在Vue.js中，路由守卫（Route Guards）是用来通过路由系统的钩子函数来控制导航流程的一种机制。它们可以在路由发生变化时执行一些代码，比如身份验证、权限检查、页面访问统计等。

全局守卫

全局守卫会影响所有路由的变化。

1，beforeEach: 在路由跳转前被调用，接收三个参数：to（即将进入的目标路由对象）、from（当前导航正要离开的路由对象）、next（一个函数，用于解析这个钩子）。

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
  // 必须调用 next() 方法来解析钩子
  next()
})

2，beforeResolve: 在所有组件内守卫和异步路由组件被解析之后，导航被确认之前被调用。

router.beforeResolve((to, from, next) => {
  // ...
  next()
})

3，afterEach: 在路由跳转后被调用，它没有 next 函数，也不会改变导航本身。

router.afterEach((to, from) => {
  // ...
})

路由独享的守卫

可以在路由配置上直接定义beforeEnter守卫。

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
        next()
      }
    }
  ]
})

组件内的守卫

可以在组件内部定义以下守卫：

1，beforeRouteEnter: 在路由进入该组件的对应路由之前被调用，不能访问组件实例this，因为守卫执行前组件实例还没被创建。

beforeRouteEnter (to, from, next) {
  // 不能访问 `this`
  next(vm => {
    // 通过 `vm` 访问组件实例
  })
}

2，beforeRouteUpdate: 在当前路由改变，但是该组件被复用时调用。

beforeRouteUpdate (to, from, next) {
  // 可以访问组件实例 `this`
  next()
}

3，beforeRouteLeave: 在导航离开该组件的对应路由时被调用。

beforeRouteLeave (to, from, next) {
  // 可以访问组件实例 `this`
  const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
  if (answer) {
    next()
  } else {
    next(false)
  }
}

在使用路由守卫时，请确保调用next()方法，否则路由导航会被阻塞。如果调用next(false)，则取消当前的导航；如果调用next('/')或者next({ path: '/' })，则导航到不同的位置。在beforeRouteEnter守卫中，next可以接收一个回调函数，这个回调函数会在路由解析完成并且组件实例被创建之后执行。