Vue3 ---＞vue-router 路由

目录

前端路由的概念与原理

1、SPA 与前端路由

2、前端路由

3、前端路由的工作方式

vue-router 的基本用法

1. 什么是 vue-router

2. vue-router 的版本

3. vue-router 4.x 的基本使用步骤

vue-router 的高级用法

1. 路由重定向

2. 路由高亮

3. 嵌套路由 

4. 动态路由匹配

5. 编程式导航

6. 命名路由

7. 导航守卫

---

前端路由的概念与原理

路由（英文：router）就是对应关系。路由分为两大类：

① 后端路由

② 前端路由

后端路由

后端路由指的是： 请求方式 、 请求地址 与 function 处理函数 之间的 对应关系

1、SPA 与前端路由

SPA 指的是一个 web 网站只有唯一的一个 HTML 页面， 所有组件的展示与切换 都在这唯一的一个页面内完成。 此时， 不同组件之间的切换 需要通过 前端路由 来实现。

2、前端路由

通俗易懂的概念： Hash 地址 与 组件 之间的 对应关系 。

3、前端路由的工作方式

① 用户 点击了 页面上的 路由链接

② 导致了 URL 地址栏 中的 Hash 值 发生了变化

③ 前端路由监听了到 Hash 地址的变化

④ 前端路由把当前 Hash 地址对应的组件 渲染都浏览器中

vue-router 的基本用法

1. 什么是 vue-router

vue-router 是 vue.js 官方给出的 路由解决方案 。它只能结合 vue 项目进行使用，能够轻松的管理 SPA 项目 中组件的切换。

2. vue-router 的版本

vue-router 目前有 3.x 的版本和 4.x 的版本。其中：

•  vue-router 3.x 只能结合 vue2 进行使用
•  vue-router 4.x 只能结合 vue3 进行使用

• vue-router 3.x 的官方文档地址：https://router.vuejs.org/zh/
• vue-router 4.x 的官方文档地址：https://next.router.vuejs.org/

3. vue-router 4.x 的基本使用步骤

1、 在项目中安装 vue-router

npm i vue-router@next -S

2、 定义路由组件

3、声明路由链接和占位符

 
 
   
    首页
    电影
    关于
 
    

 
    
    
  

 4、创建路由模块

在项目中 创建 router.js 路由模块，在其中按照如下 4 个步骤 创建并得到路由的实例对象：

1. 从 vue-router 中按需导入两个方法

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

2.  导入需要使用路由控制的组件

   import 组件名称 from '组件地址'

3.  创建路由实例对象

   // 创建路由对象
   const router = createRouter({
     // 指定路由的工作模式
     history: createWebHashHistory(),
     // 声明路由的匹配规则
     routes: [
       { path: '/home', component: Home },
       { path: '/movie', component: Movie },
       { path: '/about', component: About },
     ],
   })

4.  向外共享路由实例对象

   // 导出路由对象
   export default router
   

 5、导入并挂载路由模块

在 main.js 中导入并挂载路由模块

//导入路由模块
import router from './router'

// 挂载路由模块
app.use(router)

vue-router 的高级用法

1. 路由重定向

路由重定向 指的是：用户在访问 地址 A 的时候， 强制用户跳转 到地址 C ，从而展示特定的组件页面。 通过路由规则的 redirect 属性，指定一个新的路由地址，可以很方便地设置路由的重定向：

// 声明路由的匹配规则
  routes: [
    { path: '/', redirect: '/home' },
    { path: '/home', component: Home },  
  ]

2. 路由高亮

可以通过如下的两种方式，将 激活的路由链接 进行高亮显示：

① 使用 默认的 高亮 class 类

• 被激活的路由链接，默认会应用一个叫做 router-link-active 的类名。开发者可以使用此类名选择器，为激活的路由链接设置高亮的样式： 在全局样式表中

  .router-link-active {
    background-color: red;
    color: white;
    font-weight: bold;
  }

② 自定义 路由高亮的 class 类

• 在创建路由的实例对象时，开发者可以基于 linkActiveClass 属性，自定义路由链接被激活时所应用的类名：

  //创建路由对象
  const router = createRouter({
    // 自定义路由高亮的 class 类
    linkActiveClass: 'active-router',
  })

 

3. 嵌套路由 

通过路由实现 组件的嵌套展示 ，叫做嵌套路由。

1 、声明 子路由链接 和 子路由占位符

在 About.vue 组件中，声明 tab1 和 tab2 的 子路由链接 以及 子路由占位符

MyAbout 组件

    
    Tab1 
    Tab2
    


    
    

2 、通过 children 属性声明 子路由规则

{ //父级路由
      path: '/about',
      component: About,
      // 通过 children 属性嵌套声明子级路由规则
      children: [
     // 嵌套路由的重定向
      redirect: '/about/tab1',
        { path: 'tab1', component: Tab1 },
        { path: 'tab2', component: Tab2 },
      ],
    },

4. 动态路由匹配

1、动态路由的概念

动态路由指的是：把 Hash 地址中 可变的部分 定义为 参数项 ，从而 提高路由规则的复用性 。在 vue-router 中 使用 英文的冒号 （ : ）来定义路由的参数项。

// 动态路由匹配
    { path: '/movie/:id', component: Movie},

2 、 $route.params 参数对象

通过动态路由匹配的方式渲染出来的组件中，可以使用 $route.params 对象访问到 动态匹配的参数值 。

MyMovie 组件 --- {{ $route.params.id }}

3 、使用 props 接收路由参数

 // 动态路由匹配   vue-router 允许在路由规则中开启 props 传参
    { path: '/movie/:mid', component: Movie, props: true },

   props: ['mid'],


MyMovie 组件 --- {{ id }}

5. 编程式导航

通过 调用 API 实现导航的方式，叫做 编程式导航 。与之对应的，通过 点击链接 实现导航的方式，叫做 声明式导 航 。例如：

• 普通网页中点击 链接、vue 项目中点击 都属于声明式导航
• 普通网页中调用 location.href 跳转到新页面的方式，属于编程式导航

1 、vue-router 中的编程式导航 API

vue-router 提供了许多编程式导航的 API，其中最常用的两个 API 分别是：

① this. $router . push ('hash 地址')

•  跳转到指定 Hash 地址，从而展示对应的组件

② this. $router . go (数值 n)

•  实现导航历史的前进、后退

2 、$router. push

调用 this. $router . push () 方法，可以跳转到指定的 hash 地址，从而展示对应的组件页面

methods: {
    goToMovie(id) {
      this.$router.push('/movie/' + id)
    },

3、 $router. go

调用 this. $router . go () 方法，可以在浏览历史中进行前进和后退

 goBack() {
      this.$router.go(-1)
    },

6. 命名路由

通过 name 属性 为路由规则 定义名称 的方式，叫做 命名路由 。

// 动态路由匹配
    { name: 'mov', path: '/movie/:mid', component: Movie, props: true },

注意：命名路由的 name 值不能重复 ， 必须保证唯一性 ！

1、 使用命名路由实现声明式导航

为 标签动态绑定 to 属性的值，并通过 name 属性 指定要跳转到的路由规则。期间还可以用 params 属性 指定跳转期间要携带的路由参数。

go to movie

2 、使用命名路由实现编程式导航

调用 push 函数 期间指定一个 配置对象 ， name 是要跳转到的路由规则、 params 是携带的路由参数：

go to movie

methods: {
    goToMovie(id) {
      this.$router.push({
        name: 'mov',
        params: {
          id: 1,
        },
      })
    },
  },

7. 导航守卫

导航守卫可以控制路由的访问权限

1、 如何声明全局导航守卫

全局导航守卫 会 拦截每个路由规则 ，从而对每个路由进行 访问权限 的控制。可以按照如下的方式定义全局导航 守卫： fn()叫守卫方法

const router = createRouter({})
// 声明全局的导航守卫
router.beforeEach(fn())

2 、守卫方法的 3 个形参

全局导航守卫 的守卫方法中接收 3 个形参，格式为：

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

 // to 表示将要访问的路由的信息对象
  // from 表示将要离开的路由的信息对象
  // next() 函数表示放行的意思 
})

① 在守卫方法中如果 不声明 next 形参 ，则默认 允许用户访问每一个路由 ！

② 在守卫方法中如果 声明了 next 形参 ，则 必须调用 next() 函数 ，否则不允许用户访问任何一个路由！

3 、next 函数的 3 种调用方式

直接放行：next()

强制其停留在当前页面 ：next( false )

强制其跳转到登录页面 ：next(' /login ')

4、结合 token 控制后台主页的访问权限

// 全局路由导航守卫
router.beforeEach((to, from, next) => {
const tokenStr = localStorage.getItem('token')

  if (to.path === '/main' && !tokenStr) {
    // 证明用户要访问后台主页
    next('/login')
  } else {
    // 访问的不是后台主页
    next()
  }
})