带你用vue写后台系列（vue路由）

上一次写的路由文章不小心误删了，那就只好自己再写一下了

1、介绍

在vue之中管理页面的跳转和传参我们都使用vue-router，Vue Router 是管理单页面应用路由的主要方式，可以用于导航守卫（用于路由跳转前后的控制）、动态路由、命名路由等。

2、安装引入

Vue 2之中需要使用4.x版本以下的，强烈建议不要使用4.x以上的，以免出现各种问题！我这里使用vue-router@3.4.9,vue3以上使用4.x以及之上的路由！

npm install vue-router@3.4.9 --save

一般使用我们会把路由给封装起来进行使用，在src下面新建一个router文件夹，然后在里面写我们的index.js路由部分。

接下来需要我们去自己的根目录下main.js 文件夹之中进行引入

// 引入
import router from './router'

// 使用
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

3、使用

这里需要我们去自己的App.vue下面写上路由的容器

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

<script>
export default  {
  name:  'App'
}
</script>
<style>
</style>

然后进行使用，一般我们都会把路由进行封装成独立的一部分，这里我们看一下我们主文件下面路由的使用

4、router路由的用法

（1）跳转方式和传参

在 Vue 路由中，通常有以下几种跳转方式：

• 使用 router-link 进行跳转：

在 Vue 中，可以使用<router-link>标签进行声明式的路由跳转。这种方式通常用于在模板中进行跳转。

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

• 进行编程式跳转：

可以在组件内部使用 router.push进行编程式跳转：∗∗可以在组件内部使用‘router.push`方法进行编程式的路由跳转。这种方式通常用于在方法中进行跳转，并在其中配置参数

this.$router.push('/about');

this.$router.push({
  path: '/user',
  query: { id: '123' }
})

• 使用命名路由进行跳转：

如果在路由配置中给路由定义了名称，使用name属性来进行跳转，并传递参数

this.$router.push({ name: 'about' });

this.$router.push({
  name: 'user',
  params: { id: '123' }
})

注意：如果路由配置中设置了动态路径参数，需要使用params传递参数。

• 使用重定向进行跳转：

可以在路由配置中使用重定向功能，将一个路径重定向到另一个路径，并在其中传递参数。

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

{
  path: '/old-user/:id',
  redirect: '/user/:id'
}

在方法中进行跳转 replace()

this.$router.replace('/rppgreport?reportId='+ row.reportId);

（2）路由直接传参

Vue 路由传递参数的方式：

• 动态路由参数传递：

在路由定义时，可以使用动态路径参数来传递数据。在定义路由规则时，可以使用 : 来定义动态参数，然后在组件内部通过this.$route.params来获取传递的参数。

// 路由定义
{
  path: '/user/:id',
  component: User
}

// 组件内部获取参数
this.$route.params.id

• 查询参数传递：

使用查询参数来传递数据，通常用于 GET 请求，通过在 URL 中添加?key=value来传递参数。在 Vue 路由中，可以使用this.$route.query来获取查询参数。

// 路由链接
<router-link :to="{ path: '/user', query: { id: '123' }}">User</router-link>

// 组件内部获取参数
this.$route.query.id

• props 传递：

可以通过 props 将参数传递给组件。这需要在路由配置中设置 props 为 true，然后在组件内部通过 props 接收传递的参数。

// 路由定义
{
  path: '/user',
  component: User,
  props: true
}

// 组件内部接收参数
props: ['id']

5、分类

在 Vue Router 中，跳转方式可以分为以下几种

（1） 声明式导航：

使用 <router-link> 组件进行声明式的导航，用于页面中的链接这种方式进行跳转。

ini

 代码解读
复制代码<router-link to="/home">Home</router-link>

（2） 编程式导航：

用 router.push、router.replace 和 router.go 等方法进行编程式的导航，这种事采用 在 Vue 组件的方法中进行路由跳转。

// 前进到新路由
router.push('/home');

// 替换当前路由
router.replace('/home');

// 后退或前进多少步
router.go(-1);

（3）通过命名路由进行导航：

如果在定义路由时为路由配置了名称，可以通过路由名称进行导航。

router.push({ name: 'home' });

（4） 重定向和别名：

在路由配置中使用 redirect 和 alias 来设置重定向和别名，影响路由匹配和导航行为。

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

6、路由拦截router.beforeEach的用法简单介绍

（1）介绍

router.beforeEach一般在目录src下面的main.js里面使用:

router.beforeEach（全局前置路由守卫）

路由跳转之前执行 有三个返回参数 to（到哪里去）, from（从哪里来）, 【next（放行函数）】 【next()放行】, 【next(false)不放行】）

router.beforeEach((to, from, next) => {
   console.log(to,from) 
   next() // 放行可以可以跳转的意思
})

router.afterEach （全局后置路由守卫）

路由跳转之前执行，后置路由守卫没有next 只有to from

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

（2）参数

这里做补充说明下两个参数, to: 下一个页面/即将要进入的目标 form: 当前页面

router.beforeEach((to, from, next) => {
    console.log(to, from, next,'路由加载中！')
    NProgress.start(); //开启进度条
    next(); //满足要求后就可以放行 next()
});

router.afterEach(() => {
    console.log('路由加载完成！');
    NProgress.done(); //完成进度条
});

（3）使用

接下来我们使用路由拦截来进行路由的控制，在这部分我们可以定义跳转的白名单和对路由做出请求之前的各种操作和控制！

const whiteList = ['/login'];//定义白名单
router.beforeEach((to, from, next) => {
    console.log(to, from, next,'路由加载中！');
    if (whiteList.indexOf(to.path) !== -1) {
      // 在免登录白名单，直接进入
      console.log('白名单进入!');
      next() //满足要求放行
    }else{
      next('/login'})  //不满足要求重定向
    }
});