一、前端路由的概念与原理
路由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=router2.前端路由
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()}
})
