vue-Router 手册

安装

npm

npm install vue-router@4

yarn

yarn add vue-router@4

使用

router-link

	<router-link to="页面路由地址"></router-link>

router-view

// 第一种方式
<router-view></router-view>
// 第二种方式
<RouterView/>

路由配置

// 文件：src/router/index.js

// 1. 定义路由组件.
// 也可以从其他文件导入组件
const Home = { template: '<div>Home</div>' }

// 2. 定义一些路由
// 每个路由都需要映射到一个组件。
// 我们后面再讨论嵌套路由。
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: () => import('/About.vue')}, // 使用懒加载
]

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

// 5. 创建并挂载根实例
const app = Vue.createApp({})
//确保 _use_ 路由实例使
//整个应用支持路由。
app.use(router)

app.mount('#app')

// 现在，应用已经启动了！

路由跳转

// 方式一
<router-link to="页面路由地址"></router-link>
// 方式二
router.push(页面路由地址)
// 方式三
router.push({
	name:页面路由name
})

路由组件传参

声明式传参

params

显示参数

//路由参数配置
const router = new VueRouter({
  routes: [{
    path: '/about/:id',
    component: User
  }]
})
 
//声明式导航使用
<router-link :to="{ name: 'user1', params: { id: 123 } }">跳转</router-link>

不显示参数

//路由参数配置
const router = new VueRouter({
  routes: [{
    name: 'user1',
    path: '/about',
    component: User
  }]
})
 
//声明式导航使用
<router-link :to="{ name: 'user1', params: { id: 123 } }">跳转</router-link>

query

//路由参数配置
const router = new VueRouter({
  routes: [{
    name: 'user1',
    path: '/about',
    component: User
  }]
})
 
 //使用path
<router-link :to="{ path: '/about', query: { id: 123 } }"></router-link>
//使用name
<router-link :to="{ name: 'user1', query: { id: 123 }}"></router-link>

编程式传参

params

显示参数

import {useRouter} from 'vue-router'
const router = useRouter()
// path 方式
    //路由配置
    {
      path: '/child/:id',
      component: Child
    }
    //编程式使用
    router.push({
        path:'/child/${id}',
    })

// name 方式
    //路由配置
    {
      path: '/child:id',
      component: Child,
      name:Child
    }
    //编程式使用
    router.push({
        name:'Child',
        params:{
        id:123
        }
    })

不显示参数

    //路由配置
    {
      path: '/child',
      component: Child,
      name:Child
    }
    //编程式使用
    router.push({
        name:'Child',
        params:{
        id:123
        }
    })

query

import {useRouter} from 'vue-router'
const router = useRouter()
//路由配置
{
  path: '/child',
  component: Child,
  name:Child
}

//编程式使用
//name方式
router.push({
    name:'Child',
    query:{
    id:1
}
})
//path方式
router.push({
    path:'/child',
    query:{
    id:1
}
})

props

对象模式

const routes = [
  {
    path: '/promotion/from-newsletter',
    component: Promotion,
    props: { newsletterPopup: false }
  }
]

函数模式

const routes = [
  {
    path: '/promotion/from-newsletter',
    component: Promotion,
    props: { newsletterPopup: false }
  }
]

获取参数

params

import {useRoute} from 'vue-router'
const route = useRoute()
route.params.xxx

query

import {useRoute} from 'vue-router'
const route = useRoute()
route.query.xxx

路由守卫

路由守卫参数

to：要跳转到的目标路由

from：从当前哪个路由进行跳转

next：不做任何阻拦，直接通行

必须要确保 next函数 在任何给定的导航守卫中都被调用过一次。它可以出现多次，但是只能在所有的逻辑路径都不重叠的情况下，否则会报错。

全局路由守卫

全局前置守卫

使用方式：main.js中配置

// 在路由跳转前触发

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

在路由跳转前触发，这个钩子作用主要是用于登录验证，也就是路由还没跳转提前告知，以免跳转了再通知就为时已晚

全局后置守卫

// 路由跳转完成后触发
// beforeEach和beforeResolve之后 
// beforeRouteEnter（组件内守卫）之前

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

和beforeEach相反，它是在路由跳转完成后触发，它发生在beforeEach和beforeResolve之后，beforeRouteEnter（组件内守卫）之前。钩子不会接受next函数也不会改变导航本身

全局解析守卫

// 路由跳转前触发
// beforeEach 和 组件内beforeRouteEnter 之后
// afterEach之前

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

这个钩子和beforeEach类似，也是路由跳转前触发，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，即在 beforeEach 和 组件内beforeRouteEnter 之后，afterEach之前调用

组件内守卫

beforeRouteEnter

// 在组件生命周期beforeCreate（创建之前）阶段触发

beforeRouteEnter(to, from, next) {
    console.log('组件内路由前置守卫 beforeRouteEnter', this) // 访问不到this
    next((vm) => {
      console.log('组件内路由前置守卫 vm', vm) // vm 就是this
    })
  },

beforeRouteUpdate

  // 同一页面，刷新不同数据时调用
  
beforeRouteUpdate (to, from, next) {
    // 可以访问组件实例 
}

beforeRouteLeave

// 导航离开该组件的对应路由时调用
  
beforeRouteLeave (to, from, next) {
    // 可以访问组件实例 
}

路由独享守卫

beforeEnter

在router.js中使用,路由独享守卫是在路由配置页面单独给路由配置的一个守卫

// 在路由跳转前触发

import { createRouter, createWebHistory } from "vue-router";
const router = createRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

导航流程 及 导航流程图

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 的回调函数，创建好的组件实例会作为回调函数的参数传入。