Vue Router——路由

Vue
357
0
0
2022-11-28
Vue格式化时间显示样式
上一篇
Vue响应式依赖收集原理分析-vue高级必备
下一篇

1. 前端路由的概念与原理

路由(英文名：router)就是对应关系，分为两大类，后端路由和前端路由。

1.1 后端路由

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

express路由的基本用法如下：

const express = require('express')
const router = express.Router()

router.get('/userlist',function(req,res){/* 路由的处理函数 */})
router.post('/userlist',function(req,res){/* 路由的处理函数 */})

module.exports = router

1.2 SPA与前端路由

SPA指的是一个web网站只有一个唯一的HTML页面，所有组件的展示与切换都在这唯一的一个页面内完成。

此时，不同组件之间的切换需要通过前端路由来实现。

结论：在SPA项目中，不同功能之间的切换，要依赖于前端路由来完成。

而前端路由通俗易懂的概念就是：Hash地址与组件之间的对应关系。

1.3 前端路由工作方式

  1. 用户点击了页面上的路由连接
  2. 导致URL地址栏中的Hash值发生了变化
  3. 前端路由监听到了Hash地址的变化
  4. 前端路由把当前Hash地址对应的组件渲染到浏览器中

img

结论：前端路由，指的是Hash地址与组件之间的对应关系。

1.4 实现简易的前端路由

步骤1

导入并注册MyHome、MyMovie、MyAbout三个组件：

import MyHome from './components/MyHome.vue'
import MyMovie from './components/MyMovie.vue'
import MyAbout from './components/MyAbout.vue'

export default{
    components:{
        MyHome,
        MyMovie,
        MyAbout
    }
}

步骤2

通过component标签的is属性，动态切换要显示的组件：

<template>
<h1>APP组件</h1>

<component :is="comName"></component>
</template>

<script>
export default{
    data(){
        return{
            comName:'MyHome',//要展示的组件的名称
        }
    }
}

</script>

步骤3

在组件的结构中声明如下3个 <a>链接，通过点击不同的a链接，切换浏览器地址栏中的Hash值：

<a href="#/homt">Home</a>
<a href="#/movie">Movie</a>
<a href="#/about">About</a>

步骤4

在created生命周期函数中监听浏览器地址栏中Hash地址的变化，动态切换要展示的组件的名称：

created(){
    window.onhashchange = ()=>{
        switch(location.hash){
                case '#/home'//点击了“首页”的链接 
                this.comName='MyHom' 
                break 
                case '#/movie' //点击了电影的链接 
                this.comName='MyMovie' 
                break 
                case '#/about' //点击了关于的链接 
                this.comName='MyAbout' 
                break
        }
    }
}

2. vue-router的基本用法

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

官方文档地址：https://router.vuejs.org/zh/guide/

2.1 基本使用步骤

  1. 在项目中安装vue-router
  2. 定义路由组件
  3. 声明路由链接和占位符
  4. 创建路由模块
  5. 导入并挂载路由模块

2.2安装vue-router与定义路由组件

在vue3的项目中，只能按照并使用 vue-router 4.x，安装的命令如下：

npm install vue-router@next -S

在项目中定义 MyHome.vue、MyMovie.vue、MyAbout.vue 三个组件，将来要使用 vue-router 来控制它们的展示与切换。

2.3声明路由链接和占位符

使用 <router-link>标签来声明路由链接，并使用 <router-view>标签来声明路由占位符。

<template>
<h1>APP组件</h1>
<!-- 声明路由链接 -->
<router-link to="/home">首页</router-link>
<router-link to="/home">首页</router-link>
<router-link to="/home">首页</router-link>

<!-- 声明路由占位符 -->
<router-view></router-view>
</template>

2.4创建路由模块

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

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

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

其中，createRouter方法用于创建路由的实例对象，createWebHashHistory 用于指定路由的工作模式（Hash模式）。

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

import Home from './components/MyHome.vue'
import Movie from './components/MyMovie.vue'
import About from './components/MyAbout.vue'

3.创建路由实例对象

const router = createRouter({
    //通过history属性指定路由的工作模式
    history:createWebHashHistory(),
    //通过routes数组，指定路由规则
    routes:[
        { path:'/home',component:Home },
        { path:'/movie',component:Movie },
        { path:'/about',component:About },
    ]
})

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

export default router

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

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
//导入路由模块
import router from './router'

const app = createApp(App)

//挂载路由模块
app.use(router)//app.use()方法用来挂载“第三方的插件模块”
app.mount('#app')

3. vue-router的高级用法

3.1 路由重定向

路由重定向指的是：用户在访问地址A的时候，强制用户跳转到地址C，从而展示特定的组件页面。

通过路由规则的redirect属性，指的一个新的路由地址，可以很方便设置路由的重定向。

const router = createRouter({
    history:createWebHashHistory(),
    routes:[
        { path:'/',redirect:'/home'},
        { path:'/home',component:Home },
        { path:'/movie',component:Movie },
        { path:'/about',component:About },
    ]
})

3.2 路由高亮

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

  1. 使用默认的高亮class类
  2. 自定义路由高亮的class类

3.2.1 默认的高亮class类

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

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

3.2.2 自定义路由高亮的class类

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

const router = createRouter({
    history:createWebHashHistory(),
    //指定被激活的路由链接，会应用router-active这个类名
    //默认的router-link-active类名会被覆盖掉
    linkActiveClass:'router-active',
    routes:[
        { path:'/',redirect:'/home'},
        { path:'/home',component:Home },
        { path:'/movie',component:Movie },
        { path:'/about',component:About },
    ]
})

3.3 嵌套路由

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

  1. 声明子路由链接和子路由占位符
  2. 在父路由规则中，通过children属性嵌套声明子路由规则。

3.3.1 声明子路由链接和子路由占位符

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

<template>
<h3>MyAbout组件</h3>
<!-- 在关于页面中，声明两个子路由链接 -->
<router-link to="/about/tab1">Tab1</router-link>
<router-link to="/about/tab2">Tab2</router-link>

<!-- 在关于页面中，声明tab1和tab2的路由占位符 -->
<router-view></router-view>
</template>

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

在router.js路由模块中，导入需要的组件，并使用children属性声明子路由规则：

import Tab1 from './components/tabs/MyTab1.vue'
import Tab2 from './components/tabs/MyTab2.vue'

const router = createRouter({
    routes:[
        {
            path:'/about',
            component:About,
            children:[//通过children属性嵌套子路由规则
                { path:'tab1',component:Tab1 },
                { path:'tab2',component:Tab2 }
            ]
        }
    ]
})

注意：子路由规则path不要以 / 开头

3.4.动态路由

动态路由指的是：把Hash地址中可变的部分定义为参数项，从而提高路由规则的复用性。

在vue-router中使用英文的冒号 : 来定义路由的参数项。

//路由中的动态参数以:进行声明后，冒号后面的是动态参数的名称
{ path:'/movie/:id', component:Movie }

//将已下3个路由规则，合并成了一个，提高路由规则的复用性
{ path:'/movie/1', component:Movie }
{ path:'/movie/2', component:Movie }
{ path:'/movie/3', component:Movie }

3.4.1 $router.params参数对象

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

<template>
<!-- $router.params是路由的参数对象 -->
<h3>MyMovie组件---{{$router.params.id}}</h3>
</template>

<script>
export default{
    name:'MyMovie',
}
</script>

3.4.2 使用props接收路由参数

为了简化路由参数的获取形式，vue-router允许在路由规则中开启props传参：

//1.在定义路由规则时，声明props:true选项
//    即可在Movie组件中，以props的形式接收到路由规则匹配到的参数项
{ path:'/movie/:id', component:Movie, props:true }

<template>
<!-- 3.直接使用props中接收的路由参数 -->
<h3>MyMovie组件---{{id}}</h3>
</template>

<script>
export default{
    props:['id'] //2.使用props接收路由规则中匹配到的参数项
}
</script>

3.5 编程式导航

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

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

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

  • this.$router.push('hash地址')跳转到指定hash地址，从而展示对应的组件
  • this.$touter.go(数值n)实现导航历史的前进、后退

3.5.1 $router.push

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

<template>
<h3>MyMovie组件</h3>
<button @click="gotoMovie(3)">Go to Movie</button>
</template>

<script>
export defaule{
    methods:{
        gotoMovie(id){//id参数是电影的id值 
            this.$router.push('/movie/${id}')
        }
    }
}
</script>

3.5.2 $router.go

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

<template>
<h3>MyMovie组件 --- {{id}</h3>
<button @click="goBack">后退</button>
</template>

<script>
export defaule{
    props:['id']
    methods:{
       goBack(){this.$router.go(-1)}//后退到之前的组件页面
    }
}
</script>

3.6 命名路由

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

{
    path:'/movie/:id',
    //使用name属性为当前的路由规则定义一个名称
    name:'mov'
    component:Movie,
    props:true,
}

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

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

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

<template>
<h3>MyHome组件</h3>
<router-link :to="{name:'mov',params:{id:3}}">Go to Movie</router-link>
</template>

<script>
export defaule{
    name:'MyHome',
}
</script>

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

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

<template>
<h3>MyMovie组件</h3>
<button @click="toMovie(3)">Go to Movie</button>
</template>

<script>
export defaule{
    methods:{
        toMovie(id){//id参数是电影的id值 
            this.$router.push({name:'mov',params:{mid:id}})
        }
    }
}
</script>

3.7 导航守卫

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

img

3.7.1 声明全局导航守卫

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

//创建路由实例对象
const router = createRouter({...})

//调用路由实例对象的beforeEach函数，声明全局导航守卫
//fn必须是一个函数，每次拦截到路由的请求，都会调用fn进行处理
//因此fn叫做“守卫方法”                          
router.beforeEach(fn)

3.7.2 守卫方法的3个形参

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

router.beforeEach((to,from,next)=>{
    //to 目标路由对象 
    //from 当前导航正要离开的路由对象 
    //next是一个函数,表示放行
})

注意：

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

3.7.3 next函数的3种调用方式

  • 直接放行：next()
  • 强制其停留在当前页面：next(false)
  • 强制其跳转到登录页面：next('/login')

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

//全局前置守卫
router.beforeEach((to, from, next) => {
  const tokenStr = localStorage.getItem('token');//1.读取token 
  if (to.path === '/main' && !tokenStr) {        //2.想要访问“后台主页”且token值不存在 
    next('/login');    //3.1强制跳转到"登录页面"
  } else {
    next();  //3.2否则直接放行，允许访问“后台主页”
  }
});
Vue格式化时间显示样式
上一篇
Vue响应式依赖收集原理分析-vue高级必备
下一篇