深入理解前端路由传参和路由前置守卫

什么是路由传参?

路由传参是指在前端框架中，通过修改 URL 地址参数的方式，将数据传递给组件或页面的过程。通常情况下，通过 URL 中的参数来传递数据，可以实现页面间的跳转和数据的传递。在路由传参时，可以通过 URL 中的 query、params 和 hash 等方式传递参数。在使用某些前端框架时，路由传参可以方便地实现页面之间的数据交互和状态管理。

1.query方式传参数

传参数

在连接上写参数

<router-link to="/about?username=六思逸">六思逸</router-link>

在事件处理函数中跳转时传参数

this.$router.push('/about?username=六思逸')

以配置对象的方式传参数

this.$router.push({
    path:'/about',
    query:{
        id:10,
        username:'六思逸',
    }
})

接受参数

created(){
    console.log('接收到的数据是：', this.$route.query)
},

2.params传递参数

传参数

this.$router.push({
    name:'about',
    params:{
        id:20,
        username:'六思逸',
    }
})

接受参数

 created(){
    console.log('params接收参数：', this.$route.params)
 },

动态路径参数

第一步:配置路由，写参数匹配模式

 {
    path: '/about/:id/:username',
    name: 'about',
    component: AboutView,
  },

第二步：跳转时传递数据

this.$router.push('/about/10/六思逸');

第三步：接收参数

console.log('动态路径参数：', this.$route.params)

路由内置对象

$router 路由实例对象，主要用于调用方法，实现路由的跳转

方法在$router上

this.$router.push()

用于进行路由的切换，可以接收一个字符串路径或一个路由对象作为参数。该方法会向历史记录添加一个新的记录，使用户在浏览器中点击“后退”按钮时能够返回到先前的页面。

this.$router.push('/home');
this.$router.push({ path: '/home', query: { page: 1 } });

this.$router.go()

用于在历史记录中向前或向后导航。该方法接收一个整数作为参数，表示要前进或后退的路由记录数量。如果参数是负数，则表示向后导航。

this.$router.go(1); // 向前导航一次
this.$router.go(-1); // 向后导航一次

this.$router.replace()

用于替换当前路由记录，使其指向一个新的路由。该方法的行为与this.$router.push()方法类似，但不会向历史记录中添加一条新的记录。

this.$router.replace('/login');
this.$router.replace({ name: 'login', params: { id: 123 } });

$route 路由信息对象，主要用于获取当前路由的各种信息

属性在$route上

$route.path

路由的路径，它是一个字符串，描述了当前路由的路径，例如 /home、/about 等。

export default {
  mounted() {
    console.log(this.$route.path) // 打印当前路由路径
  }
}

$route.query

路由的查询参数，是一个对象，包含当前路由的查询参数。例如 /user?id=123&name=tom，则 $route.query 对象就是 { id: '123', name: 'tom' }。

<template>
  <div>
    <p>用户ID：{{ $route.query.id }}</p>
    <p>用户姓名：{{ $route.query.name }}</p>
  </div>
</template>

$route.name

当前路由的名称，是一个字符串，通常用于路由的命名。例如 name: 'user'，则 $route.name 就是 'user'。

export default {
  mounted() {
    console.log(this.$route.name) // 打印当前路由名称
  }
}

路由前置守卫

什么是路由守卫?

路由守卫是Vue Router的一种功能，可以拦截和监控路由的跳转，执行一些操作，然后允许或禁止路由跳转。路由守卫由全局守卫、路由独享守卫、组件内守卫组成，而路由前置守卫是Vue Router中的一种路由独享守卫，用于在路由跳转前执行一些操作。

如何配置路由前置守卫?

在路由配置文件中定义一个路由，并添加beforeEnter属性，给它赋值一个函数作为路由前置守卫。

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      component: User,
      beforeEnter: (to, from, next) => {
        // to: 要进入的路由对象
        // from: 离开的路由对象
        // next: 进入下一个路由的函数
        const isValid = /[0-9]+/.test(to.params.id)
        if (isValid) {
          next()
        } else {
          next(false) // 禁止进入下一个路由
        }
      }
    }
  ]
})

路由前置守卫函数有三个参数

to：要进入的路由对象。

from：离开的路由对象。

next：进入下一个路由的函数，需要调用该函数才能进入下一个路由。如果调用该函数并传入参数，则表示路由跳转已经完成，需要执行一些操作或进入其他路由。