vue-router路由(重定向，嵌套，动态路由匹配，命名，高亮，守卫)

一、前端路由的概念与原理

路由router就是对应关系。分为前端路由和后端路由。

1后端路由

后端路由指的是：请求方式、请求地址与function处理函数之间的对应关系。在node.js中，express理由的基本用法如下：

const express = require('express');
const router = express.Router();router.get('/user', function(req, res){//路由处理函数
});
router.post('/user', function(req, res){//路由处理函数
});module.exports=router

2.前端路由

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

前端路由是hash地址和组件之间的对应关系。

3.前端路由的工作方式

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

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

前端路由监听到hash地址的变化

前端路由把当前hash地址对应的组件渲染到浏览器中

//页面上的路由链接
<a href=''#/home></a>//前端路由的对应关系
{path:'#/home',component:Home}//页面上要展示的组件
<Home/>

4.模拟实现简单前端路由

<template><a href="#/box">about</a><a href="#/demo">demo</a><hr><component :is="comName"></component>
</template>
<script >
import Box from "../box/index.vue";
import Demo from "../demo/index.vue";
export default{components:{Mato,Demo},data(){return{comName:""}},created(){window.onhashchange=()=>{switch(location.hash){case '#/box':this.comName='Box';breakcase '#/demo':this.comName='Demo';break}}}
}

二、vue-router

vue-router4.x版本只能结合vue3使用

1.基本使用步骤

a.在项目中安装vue-router

npm install vue-router@next -S
//next是最新版本

b.定义路由组件

c.声明路由链接和占位符

//声明路由链接
<router-link to='/home'>首页</router-link>
//声明路由占位符
<router-view></router-view>

d.创建路由模块

import {createRouter,createWebHashHistory} from "vue-router";import home from "../views/home/index.vue";
import about from "../views/about/index.vue";const router=createRouter({history:createWebHashHistory(import.meta.env.Base_URL),routes:[{  path:"/", redirect:"/home" },{  path:"/home", name:"/home", component:home  },{  path:"/about", name:"/about", component:about  }]
})export default router;

e.导入并挂载路由

//main.js
import router from "./routers/index.js";
app.use(router)

history:createWebHashHistory(import.meta.env.Base_URL),如果不写()会报错，可以写成history:createWebHashHistory()

2.路由重定向redirect

用户在访问地址a的时候，强制用户跳转到地址c，从而展示特定的组件页面。

 {  path:"/", redirect:"/home" },

3.路由高亮

a.router-link-active的类名

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

<template><div><router-link to="/home">home</router-link><router-link to="/about">about</router-link><hr><router-view></router-view></div>
</template>
<script setup>
</script>
<style scoped>
.router-link-active{background-color: red;color: #fff;font-weight: bold;
}
</style>

b.linkActiveClass属性

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

import {createRouter,createWebHashHistory} from "vue-router";import home from "../views/home/index.vue";
import about from "../views/about/index.vue";const router=createRouter({history:createWebHashHistory(import.meta.env.Base_URL),linkActiveClass:'router-active'routes:[{  path:"/", redirect:"/home" },{  path:"/home", name:"/home", component:home  },{  path:"/about", name:"/about", component:about  }]
})export default router;

//style.css
.router-active{background-color: red;color: #fff;font-weight: bold;
}

4.嵌套路由

//嵌套路由 {path:'/about',component:About,children:[{path:'tab1',component:Tab1 },{path:'tab2', component:Tab2 }]}//嵌套组件
<template><router-link to="/about/tab1">tab1</router-link><router-link to="/about/tab2">tab2</router-link><hr><router-view></router-view>
</template>

嵌套路由的重定向

        {path:'/about',component:About,redirect:'/about/tab1',children:[{path:'tab1',component:Tab1 },{path:'tab2', component:Tab2 }]}

5.动态路由匹配

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

<template><div><router-link to="/movie/1">movie1</router-link><router-link to="/movie/2">movie2</router-link><router-link to="/movie/3">movie3</router-link><hr><router-view></router-view></div>
</template>{path:'/movie/:id',component:Movie,}<template><div>movie</div>{{ $route.params.id }}
</template>

使用props接收路由参数

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

        {path:'/movie/:id',component:Movie,props:true}<template><div>movie</div>{{ id }}<hr>
</template>
<script>
export default{props:['id']
}
</script>

6.vue-router中编程式导航api

通过调用api实现导航的方式叫做编程式导航。调用location.href跳转到新页面

通过点击链接实现导航的方式叫做声明式导航。<a/><router-link>标签

a.this.$router.push('hash地址'）

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

<template><div>home</div><button @click="goToMovie(3)">导航去movie页面</button>
</template>
<script >
export default{methods:{goToMovie(id){this.$router.push(`/movie/${id}`)}}
}
</script>

b.this$router.go()

实现导航历史的前进，后退

<template><div>movie</div>{{ id }}<button @click="goBack">后退</button><hr>
</template>
<script>
export default{props:['id'],methods:{goBack(){this.$router.go(-1)}}
}
</script>

7.命名路由(添加name属性)

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

明明路由name必须唯一，不能重复。

{path:'/movie/:id',name:'movie',component:Movie,props:true}

<template><div>home</div><button @click="goToMovie(3)">导航去movie页面</button><router-link :to="{name:'movie',params:{id:3}}">导航去movie页面</router-link>
</template>
<script >
export default{methods:{goToMovie(id){this.$router.push({name:'movie',params:{id:id}})}}
}
</script>

三、导航守卫

导航首位可以控制路由的访问权限。

1.如何声明全局路由守卫

全局导航首位会拦截每个路由规则，从而对每个路由进行访问权限的控制。

2.路由守卫的3个参数to,from,next

to目标路由对象

from 当前导航正要离开的路由对象

next是一个函数，表示放行。不声明next参数，则默认用户可以访问每一个路由，声明了next参数，则必须调用next()函数，否则不允许用户访问任何一个路由。next(false);强制其停留在当前页面；next(‘’/login);强制其跳转到指定页面

router.beforeEach((to,from,next)=>{const token = localStorage.getItem('token');if(to.path==='/main' && !token){console.log('goHome');next('/home')}else{next()}
})