vue-router笔记摘录认识

2022-04-24 本文已影响0人似朝朝我心

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,看到path
next('/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()//页面放行
        }
    })