目录
路由发展
路由的基本使用
路由的删除
路由守卫
路由
1.1.路由器
1.1作用:维护一个映射表,映射表决定了数据的流向
比如:
当某人给你发送一条消息————>路由器————>(通过路由器分配的IP地址找到相对应的mac地址的主机)电脑
1.2.后端路由
1.1一个网站由多个网页组成,每个网页对应着多个地址
比如:
网页 传到 服务器 (维护url对应的页面的一个映射关系) 渲染出对应的HTML然后再返回网页
ulr1:xxxx.xxx.com/————> ulr1:xxxx.xxx.com
url2:xxxx.xxx.com/A————> url2:xxxx.xxx.com/A
url3:xxxx.xxx.com/B————> url3:xxxx.xxx.com/B
1.3前端路由
映射关系由前端来维护叫做前端路由
核心:在改变URL时,页面不能进行整体的刷新,只是进行组件的替换
1.1作用:1.修改页面的url地址
2.让
1.4.路由的使用
步骤:
1.1.1创造路由对象
routers:映射关系
history:修改url的模式(hash/history)
import {createRouter,createWebHashHistory} from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
// 配置路由
const router = createRouter({
// 使用Hash模式来切换url
history: createWebHashHistory(),
// 配置映射关系
//path:路径
//component:对应的组件
routes:[{
path:'/home',
component:Home
},{
path:'/about',
component:About
}]
})
export default router
1.1.2让路由对象生效
在main.js文件中use.(router)
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')
1.1.3.router-view的占位
<template>
<div class="app">
<h2>App</h2>
<div class="nav">
<router-link to="/home">Home</router-link>
<router-link to="About">About</router-link>
</div>
//我在这里
<router-view></router-view>
</div>
</template>
<script setup>
</script>
<style lang="less" scoped>
</style>
1.1.4router-link进行路由的切换
<div class="nav">
<router-link to="/home">Home</router-link>
<router-link to="/About">About</router-link>
</div>
1.2.默认路径的重定向"routes"
在默认路径重定向到/home路径下,即在默认路径下就自动跳转到/home组件
routes: [{
path: "/",
redirect: "/home"
}]
1.3.使用History过程
History的使用与Hash使用相同
1.3.1.只需要从vue-router文件中引入createWebHisotry
1.3.2.然后将模式改为Hisotry
import { createRouter,createWebHistory } from 'vue-router'
const router = createRouter({
// 使用Hash模式来切换url
history: createWebHistory(),
})
1.4.router-link标签的三个属性
1.4.1.to属性
可以是字符串也可以是对象,为对象时就是动态绑定
1.4.2.replace属性
不会记录历史内容,实质时调用router.repleace( )而不是router.push( )
1.4.3.active-class属性
默认为router-link-active
1.5.路由的懒加载
问题:一个完整得项目,业务逻辑很多,在进行项目打包到App.js中会很大,用户从服务器中下载下来会很慢得
解决:在进行webpacke时,进行分包处理
routes: [{
path: "/",
redirect: "/home"
},
{
path: '/home',
component: ()=>import('../views/Home.vue')
}, {
path: '/about',
component:()=>import('../views/About.vue')
}]
1.6.路由的其他属性
name:独一无二(具体的自己网上查)
1.7.动态路由
1.1需求:给定匹配模式的路由映射到同一个组件
例如:我们可能有一个User组件,它就会所有用户进行渲染,但是用户的ID不同,这就需要我们动态来实现
{
name:"User",
path:"/User/:id",//:动态绑定
component:()=>import("路径")
}
1.2获取对应的值
1.2.1.在tem中获取:$route.prams.id
<template>
<h2>
{{$route.prams.id}}
</h2>
</template>
就可以获取到其id值
1.2.2在setup中,需要使用vue-router库提供的useRoute( )
<script setup>
import {useRoute} from './vue-router'
const route = useRoute()
consloe.log(route.params.id)
</script>
补充:使用onBeforeRouteUpdate()
onBeforeRouteUpdate((to,from)=>{
• console.log(from.params.id)
• console.log(to.params.id)
})
ERR:可以实现从XXX跳转到XXX
1.8.NotFound页面的显示
需求:当用户输入的了一个不存在的地址,给出一些提示让用户知道搞错啦
{
path:"/:pathMatch(.*)",//表示匹配不到上面其它path时,就显示该组件
component:"XXXXX"
}
补充:在配置规则后面加上 *,表示 是否解析/:
区别:加上后会解析为数组
需求:是否需要拿到路径
1.9.链式编程(通过按钮实现页面的跳转)
<template>
<div class="app">
<button @click="btnToHome"> 首页</button>
</div>
<router-view></router-view>
</div>
</template>
<script setup>
import { useRouter } from 'vue-router';
const router = useRouter ()
function btnToHome(){
router.push("/home")
/*..传一些数据,$router.query拿到数据*/
query:{
name:"XXXx",
age:"xxxx"
}
}
</script>
1.10.动态添加路由(后台管理系统开发)
-
比如根据不同用户的不同权限,注册不同组件
-
此时我们就可以使用addRoute( )方法
//写死的,实际开发中需要请求数据来进行判断 let isMin=true; //此处只写了一个二级页面,一级页面也是类似
if(isMin){
router.addRoute("home",{
name:"subject",
path:"subject",
component:()=>import("../views/Subject.vue")
})
}
删除路由:
1.11.路由守卫
当/home ——>/order组件
-
拦截:guard
-
判断逻辑
实现:使用beforeEach()函数
原理:在进行任何路由跳转之前,传入beforeEach函数的都会被回调
//路由守卫 router.beforeEach((to,from)=>{ if(to.path!=='/login'){ return('/login') } console.log("路由守卫") })
1.11.1参数
-
to:即将进入的路由的Route对象
-
from:即将离开的路由Route对象
1.11.2返回值
-
取消当前导航(很少用到)
-
不返回或者underfind:进行默认导航
-
返回路由地址:
-
可以一个String类型的路径
-
也可以是对象,包含path、query、params等
-
-
1.11.3需求
需求:进入某个页面时,判断用户是否登录
情况一: 用户没有登录,需跳转到登录页面
情况二:用户已经登录,直接跳转到该页面
判断原理:用户登录后,localStorage保存'token'
'token':login以后,会发送给服务器,服务器会返回一个"token",在进行下一步操作,又会传给服务器
完整代码
路由部分:通过localStorage.getItem("token")获取'token',然后进行判断用户是否已经登录和跳转的页面是否是目标组件
router.beforeEach((to,from)=>{
const token = localStorage.getItem("token")
if(!token&&to.path==='/subject'){
return '/login'
}
})
login.vue
<script setup>
import { useRouter } from 'vue-router';
const router = useRouter()
function login(){
// 接受token,在此处接受是为了通过路由里面的判断,让其返回undefined
localStorage.setItem('token','loacal')
// 跳转到该页面
router.push("/subject")
}
</script>
消除token(即退出token)
将localStoage中的token移除
<script setup>
function logout(){
localStorage.removeItem('token')
}
</script>