vue-router条记摘录熟悉

计算机软件开发 · 2024-9-9 18:00:01

1.SPA单页面应用的明白

SPA（single-page application），翻译过来就是单页应用SPA是一种网络应用步调或网站的模子，它通过动态重写当前页面来与用户交互，这种方法克制了页面之间切换打断用户体验在单页应用中，全部须要的代码（HTML、JavaScript和CSS）都通过单个页面的加载而检索，大概根据必要（通常是为相应用户使用）动态装载适当的资源并添加到页面页面在任何时间点都不会重新加载，也不会将控制转移到其他页面
举个例子来讲就是一个杯子，早上装的牛奶，中午装的是开水，晚上装的是茶，我们发现，变的始终是杯子里的内容，而杯子始终是谁人杯子结构如下图
SPA我的明白就是：一个项目中只有唯一的一个页面，全部功能的切换都只是由一个页面来提交完成。

2.SPA与路由：

在vue项目中，路由就是对应关系，即url地点栏和组件页面之间的逐一对应关系，不同的地点导致展示不同的组件。

3.前端路由的明白：

哈希地点与组件路由的对应关系，#号就是我们常说的哈希，普通点又称为锚链接（只是换了个好听的马甲），锚链接的特性就是在同一个页面内举行上下跳转，锚链接最大的特点便是不会导致页面举行跳转革新，它只会导致汗青纪录的变革。
以是我们可以明白哈希地点着实就是锚链接，不同的#哈希展示不同的组件页面。

4.vue路由相干

$route 叫路由对象$router 叫导航对象打印this会看到$route和$router动态路由调用{{$route.params.id}}和{{this.$route.params.id}}是一样，可以省略this在路由内里设置:params:true组件用:props:['id']吸收也是一样的效果/ 叫路径参数?和&是查询参数 $router.go()即是$router.forward()和$router.back()的连合beforeEach(to,from,next)路由前置守卫可以打印to,看到pathnext('/login')欺压跳转next()直接放行页面next(false) 克制通行

5.登录功能的根本逻辑

v-model绑定用户名和暗码的时间一样平常加上.trim修饰符

v-model.trim="username"v-model.trim="password"

简朴的一个模仿登录逻辑,登录乐成下发token身份验证，缓存到欣赏器

methods:{ login(){ if(this.username == 'admin' && this.password == '123456'){ //登录乐成，存储token localStorage.setItem('token','xxxxxxxxx') this.$router.push('/home') }else { // 登录失败，清除token localStorage.removeItem('token') } }}

退出登录一样平常要清除token然后跳转回到登录页面

logout(){ localStorage.removeItem('token') this.$router.push('/login') }

路由权限控制(路由全局前置守卫)，假如用户没有登录，就不能访问指定的页面。

router/index.js
beforeEach((to,from,next) =>{ if(to.path === '/home'){ //判断路径 // 有token直接放行 const token = localStorage.getItem('token') if(token){ next() }else{ // 没有token，跳转到登录页 next('/login') } }else{ next()//页面放行 } })

子路由不必要斜线

第一个子路由的path：' '为空，实现的效果即是路由重定向

哈希路径小写，组件大写

多个页面都必要路由拦截（路由全局前置守卫）

一样平常写法：
beforeEach((to,from,next) =>{       if(to.path === '/home' || to.path === '/user' || to.path === '/shopcart' || to.path === '/info'){          // 有token直接放行          const token = localStorage.getItem('token')          if(token){             next()          }else{             // 没有token，跳转到登录页             next('/login')          }       }else{          next()//页面放行       } })这种使用||逻辑运算符的显然，当页面多的时间显得代码冗余
改进版，将页面路径写入到一个pathArr数组中，然后用indexOf()举行判断，-1 为存在
beforeEach((to,from,next) =>{       const pathArr = ['/home','/user','/shopcart','info'] //必要给权限的页面       if(pathArr.indexOf(to.path) !== -1){ //-1为数组中存在，判断乐成          // 有token直接放行          const token = localStorage.getItem('token')          if(token){             next()          }else{             // 没有token，跳转到登录页             next('/login')          }       }else{          next()//页面放行       } })假如是一个大项目，则必要独立封装成一个js文件,封装头脑
/router/pathArr.js
export default ['/home','/user','/shopcart','info']router/index.js举行引入
import pathArr from './router/pathArr'beforeEach((to,from,next) =>{       if(pathArr.indexOf(to.path) !== -1){ //-1为数组中存在，判断乐成          // 有token直接放行          const token = localStorage.getItem('token')          if(token){             next()          }else{             // 没有token，跳转到登录页             next('/login')          }       }else{          next()//页面放行       } })

vue-router条记摘录熟悉

所属分类: 问答交流

新帖推荐: 30日

推荐作品