程序员经验分享-hwhale

vue路由器学习（个人学习笔记四）

2023-11-20

目录

友情提醒

先看文章目录，大致了解知识点结构，直接点击文章目录可以跳转到文章指定位置。

第一章、路由简介

1.1）什么是路由

①一个路由就是一组映射关系（key - value） ，key 为路径，value 可能是 function（方法）或 component（组件）。
②路由的分类：
1、后端路由：例如：@RequestMapping，理解：value 是 function（方法）, 用于处理客户端提交的请求。工作过程：服务器接收到一个请求时, 根据请求路径找到匹配的函数来处理请求, 返回响应数据。
2、前端路由：router，理解：value 是 component（组件），用于展示页面内容。工作过程：当浏览器的路径改变时, 对应的组件就会显示。
在这里插入图片描述

1.2）安装路由插件

①在Terminal执行命令

命令：npm i vue-router

在这里插入图片描述

②报错了，因为默认安装了4版本的 vue-router，该版本只能在vue3中使用
Vue2中我们应该安装3版本的vue-router

在这里插入图片描述
③执行安装3版本的命令，安装成功

命令：npm i vue-router@3

在这里插入图片描述

第二章、自定义路由器

2.1）创建路由器文件index.js文件

在这里插入图片描述

2.2）index.js文件中配置路由信息

//我们在这里写路由信息
//引入路由包
import VueRouter from "vue-router"
//引入组件地址
import LoginDemo from "../components/Login"
import RegDemo from "../components/Reg"
import CodeLogin from "../components/login/CodeLogin"
import PhoneLogin from "../components/login/PhoneLogin"
import Main from "../components/Main"
//创建路由器对象
export  default  new VueRouter({
    //配置路由信息  routes  多组路由信息
    routes:[
        //配置默认加载组件
        {
            path:"/",//当请求是跟路径请求是  直接发起/loginPath请求
            redirect:"/loginPath"
        },
        //路由的信息写在路由对象中
        {
            //一级路径  在跟路径下直接访问  需要加载到app.vue中
            path:"/loginPath",//某个组件的访问路径  /代表根路径 http://ip:port/loginPath
            //对应的组件
            component:LoginDemo,
            children:[//配置当前路由的子路由
                {
                    //二级三级路由不能写/前缀
                    path:"codeLoginPath",//该路由是二级路由  由一级路由发起  /loginPath/codeLoginPath
                    name:"codeLoginName",//当前二级的名字
                    component:CodeLogin
                },
                {
                    path:"phoneLoginPath",
                    component:PhoneLogin
                }
            ]
        },
        {
            path:"/regPath",
            component:RegDemo
        },
        {
            path:"/mainPath",
            component:Main
        }
    ],
    //路由器是前端路由  为了和后台请求区别  当前请求访问的是前端组件
    //mode属性可以设置不显示#路径前缀
    mode:"history" //默认mode是hash  浏览器路径中会有#   设置为history 就不再显示#
})

第三章、使用路由器

3.1）在main.js文件中将路由器绑定到Vue对象

当把路由器绑定到Vue对象，其下所有组件都拥有路由器功能

import Vue from 'vue'
import App from './App.vue'
//把路由器绑定到vue对象身上
//1 引入路由器组件
import VueRouter from "vue-router"
//2 引入我们自己写的路由器js文件
import MyRouter from "./router/index"
//3 让vue对象有路由器功能
Vue.use(VueRouter)
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  //把我们写好的路由器  放在vue对象上
  Router:MyRouter,
  data(){
    console.log("这是vue对象：",this)
    return{}
  }
}).$mount('#app')

3.2）在App.vue根组件上发起路由请求

通过在组件上发起路由请求，并指明此路由对应的一般组件加载到哪里（指明加载到App.vue根组件上还是加载到一般组件上）

<template>
  <div id="app">
      <!--通过发起路由请求  加载对应的组件，在index.js配置了映射-->
      <!--<a href="/loginPath">登录</a>
      <a>注册</a>
      <hr/>-->
      <!--router-link是路由连接请求  它会被vue对象编译成a标签-->
      <router-link to="/loginPath">登录</router-link>
      <router-link to="/regPath">注册</router-link>
      <hr/>
      <!--router-view指路由连接请求对应的组件展示位置-->
     <router-view></router-view><!--  一级路由展示位置  -->
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>
<style>
</style>

2.5）一级路由对应的三个组件

2.5.1）login.vue

将一级路由组件加载到根路由

<template>
    <div>
        <center>
            <router-link to="/loginPath/codeLoginPath">账号密码登录</router-link>
            <router-link to="/loginPath/phoneLoginPath">手机号登录</router-link>/
            <router-link to="/mainPath">去首页</router-link>
            <br/>
            <router-link :to="{name:'codeLoginName'}">根据名字账号密码登录</router-link>/
            <router-link to="/loginPath/phoneLoginPath">手机号登录</router-link>
            <button @click="goToMain()">去首页</button>
            <hr/>
            <router-view></router-view><!--  二级路由展示位置 -->
        </center>
    </div>
</template>

<script>
    export default {
        name: "LoginDemo",
        data(){
            console.log("这是loginDemo的VC对象:",this)
            return{}
        },
        methods:{
            goToMain(){
                //使用路由跳转到首页
               //this.$router.push("/mainPath") // push是加入一个新路径
                alert("通过this.$router进行路由跳转")
                this.$router.replace("/mainPath")//替换当前路径
            }
        }
    }
</script>

<style scoped>

</style>

2.5.2）reg.vue

<template>
    <div>
        <center>
            <h1>欢迎使用注册组件</h1>
            <from>
                账号：<input type="text" name="loginCode"/><br/>
                密码：<input type="text" name="loginPwd"/><br/>
                <input type="button" value="注册"/><br/>
            </from>
            <a>去登录</a>
        </center>
    </div>
</template>

<script>
    export default {
        name: "RegDemo"
    }
</script>

<style scoped>

</style>

2.5.3）main.vue

<template>
    <div>
        <h1>欢迎XXX访问首页</h1>
    </div>
</template>

<script>
    export default {
        name: "MainDemo"
    }
</script>

<style scoped>

</style>

2.6）二级路由对应的组件

将二级路由组件加载到一级路由组件

2.6.1）CodeLogin.vue

<template>
    <div>
        <h1>账号密码登录组件</h1>
        <form>
            账号：<input type="text" name="loginCode"/><br/>
            密码：<input type="text" name="loginPwd"/><br/>
            <input type="button" value="登录"/><br/>
        </form>
       <router-link to="/regPath">去注册</router-link>
    </div>
</template>

<script>
    export default {
        name: "CodeLogin"
    }
</script>

<style scoped>

</style>

2.6.2）PhoneLogin.vue

<template>
    <div>
        <h1>手机验证码登录组件</h1>
        <form>
            账号：<input type="text" name="loginCode"/><br/>
            密码：<input type="text" name="loginPwd"/><br/>
            <input type="button" value="登录"/><br/>
        </form>
        <router-link to="/regPath">去注册</router-link>
        <hr/>
        <!--加载三级路由组件-->
        <router-view></router-view><!--  三级路由展示位置 -->
    </div>
</template>

<script>
    export default {
        name: "PhoneLogin"
    }
</script>

<style scoped>

</style>

第三章、路由组件的细节

3.1）路由组件的命名

在index.js配置路由的名字

children:[//配置当前路由的子路由
                {
                    //二级三级路由不能写/前缀
                    path:"codeLoginPath",//该路由是二级路由  由一级路由发起  /loginPath/codeLoginPath
                    name:"codeLoginName",//当前二级的名字
                    //对应的组件
                    component:CodeLogin
                },
                {
                    path:"phoneLoginPath",
                    component:PhoneLogin
                }
            ]
        }

用名字替代路径

<router-link to="/loginPath/codeLoginPath">账号密码登录</router-link>
            <router-link to="/loginPath/phoneLoginPath">手机号登录</router-link>/
            <router-link to="/mainPath">去首页</router-link>
            <br/>
            <router-link :to="{name:'codeLoginName'}">账号密码登录</router-link>/
            <router-link to="/loginPath/phoneLoginPath">手机号登录</router-link>
            <button @click="goToMain()">去首页</button>

3.2）路由的跳转方式

普通的跳转方式

<router-link to="/mainPath">去首页</router-link>

给按钮添加点击事件：@click

<button @click="goToMain()">去首页</button>

通过点击事件，替换当前路径，或加入新路径。

 methods:{
            goToMain(){
                //使用路由跳转到首页
                //this.$router.push("/mainPath") // push是加入一个新路径
                alert("通过this.$router进行路由跳转")
                this.$router.replace("/mainPath")//替换当前路径
            }
        }

第四章、路由守卫

4.1）路由守卫简介

①路由守卫是对所有路由请求进行前置和后置拦截的方法
②路由守卫是一组可以监听路由变化并控制路由跳转的函数，可以用来在路由跳转前/后对页面进行权限验证、状态拦截等操作，从而增强页面交互的安全性和可控性。
③路由守卫包括全局守卫、单个路由独享的守卫和组件内守卫三种类型。主要学习全局路由守卫

4.2）在index.js文件配置全局路由守卫

import VueRouter from "vue-router"
import Main from "../components/Main"

const MyVueRouter = new VueRouter({
    routes:[
        {
            path:"/",
            redirect:"/loginPath"
        },
        {
            path:"/loginPath",
            component:()=>import("../components/Login.vue"),
            meta:{
                titleName:"登录"
            }
        },
        {
            path:"/mainPath",
            component:Main,
            meta:{
                //meta属性 是我们自定义属性 你想写什么就写什么
                love:false,
                titleName:"首页"
            },
            //独享路由守卫  只有前置路由守卫
            beforeEnter:((to, from, next)=>{
                console.log("独享路由守卫to:",to)
                console.log("独享路由守卫from:",from)
                console.log("独享路由守卫next:",next)
                //可以根据to的name  path来判断是否放行   组件较多使用meta来提供标识
                if(to.meta.love=="true"){
                    next();
                }else{
                    next("/loginPath");//强行去登录页面
                }
            })
        },
        {
            path:"/empPath",
            component:()=>import("../components/Emp.vue"),
            meta:{
                titleName:"员工管理"
            }
        }
    ],
    mode:"history"
});
//全局路由守卫
//前置路由守卫  每一个路由请求请求路由器时  前置路由守卫都会进行拦截
MyVueRouter.beforeEach(function(to,from,next){
    //to：你要访问哪个路由
    //from:你这个请求从哪来
    //next:是否让该请求通过
    console.log("我是全局前置路由守卫，只要有人发起对路由器的路由请求 我都能监听到")
    console.log("你这个请求从哪来：from:",from)
    console.log("你要到哪去：to:",to)
    console.log("next有什么用：next:",next)
    //当有人访问mainPath  需要验证账号是否登录
    if(to.meta.love==false){
        alert("没有登录不能访问首页");
    }else{
        next();//放行函数
    }
})
//全局路由后置守卫
MyVueRouter.afterEach(function(to,from){
    console.log("我是后置路由守卫，你从哪来 from:",from)
    console.log("我是后置路由守卫，你到哪来 to:",to)
    //一般我们在后置路由守卫中修改页面的title值
    window.document.title=to.meta.titleName
})
//对外声明该路由器对象
export default MyVueRouter

4.3）独享路由守卫和组件内守卫（了解）

4.3.1）独享路由守卫

① 含义：某一个路由独有的路由守卫，api 名字是 beforeEnter
单个路由独享的守卫是指只针对单个路由定义的函数，可以用来对该路由进行特殊的控制和操作。比全局守卫更细粒度。
②beforeEnter(to, from, next)：在路由跳转前执行，和全局前置守卫的用法一样，但是只对当前路由有效。
③独享路由守卫只有 beforeEnter ，没有 后置守卫
beforeEnter 和 全局后置守卫 可以同时使用，不冲突！

{
//这个组件的访问路径
path:"/login",
component:LoginDemo,
    children:[
        {
            path:"codeLogin",
            component:()=>import("../components/CodeLogin"),
            meta:{isAuth:true},
            beforeEnter:((to, from, next)=>{
                console.log("独享路由守卫to:",to)
                console.log("独享路由守卫from:",from)
                console.log("独享路由守卫next:",next)
                //可以根据to的name  path来判断是否放行   组件较多使用meta来提供标识
                if(to.meta.isAuth){
                    next();
                }else{
                    next("/login");//强行去登录页面
                }
            })
        },

4.3.1）组件路由守卫

①组件内路由守卫，就是在组件内部编写代码，实现权限管理 ，如果组件里面有自己单独的权限逻辑，可以使用这两个路由守卫
②进入守卫：通过路由规则，进入该组件时被调用
beforeRouteEnter (to, from, next) { },
③离开守卫：通过路由规则，离开该组件时被调用
beforeRouteLeave (to, from, next) { }

<template>
  <div>
    我是User的内容
  </div>
</template>

<script>
export default {
  name:'UserDemo',
  // 进入守卫：通过路由规则，进入该组件时被调用
  beforeRouteEnter (to, from, next) {
    console.log("beforeRouteEnter被调用")
    if(to.meta.isAuth){
      if(localStorage.getItem('username') === "大郎"){
        next()
      }else{
        alert('用户名不正确，没有权限查看！')
      }
    }else{
      next()
    }
  },
  //离开守卫：通过路由规则，离开该组件时被调用
  beforeRouteLeave (to, from, next) {
    console.log("beforeRouteLeave被调用",to,from)
    next()
  }
}
</script>
<style scoped>
</style>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

前端知识汇总

学习

笔记

vue路由器学习（个人学习笔记四） 的相关文章

  • Jenkins+Docker持续集成 流程图

    简介 在互联网时代 对于每一家公司 软件开发和发布的重要性不言而喻 目前已经形成一套标准的流程 最重要的组成部分就是持续集成 CI 及持续部署 交付 CD 本文基于Jenkins Docker Git实现一套CI自动化发布流程 传统工作流程

  • 对对对，我放出来了，对对对对对对--对对对对！

    很多同学以为我懒 天天问我怎么一直不发文 是不是懒了 胖了 堕落了 被收变了 其实主要因为我没背景 只有背影 黑屋去吧你 我刚从黑屋出来了 最近发生这么多事 我还说什么 不说了 一切都是对对对对对对对 就对了 还有很多同行的号直接祭了 最近

  • js读取jpg图片扩展信息，处理二进制数据

    js 读取图片扩展信息 将图片转为ArrayBuffer var http new XMLHttpRequest http onload function if this status 200 this status 0 console l

  • ReactNative D8 Cannot fit requested classes in a single dex file

    我现在的版本 再更新RN版本之后 发现在装包的时候出现了 D8 Cannot fit requested classes in a single dex file methods 65749 gt 65536 这个问题 百度上是说Andro

  • 正弦函数的频谱图（FFT）

    从理论上讲 正弦函数的傅里叶变换是冲击函数 它的幅值为原正弦信号幅值的1 2倍 即 若x t Acos t 则其频谱幅值最大值为A 2 如左图 但是 我们用matlab求出来的频谱图却不是左边这样的 而是右图 原因是 1 理论中的正弦信号是

随机推荐

  • 分布式时序相似查询初探

    时序数据 即随时间变化的数据 在人们的日常生活中无处不在 过去的近十年来 随着电子监控和智能穿戴等设备的普及 更是产生了海量的时序数据 例如 经过多年的发展 火力发电行业的数字化程度已经达到了很高的水平 以一台60万千瓦的中型火电机组为例

  • c#复习题（简答题：基础+面向对象）

    1 简答题 填写程序 要求如下 输入三角形三条边 先判断是否可以构成三角形 如果可以 则求三角形的周长和面积 否则报错 提示 输入的三个数构成三角形三边的条件 每条边长均大于0 并且任意两边之和大于第三边 代码编写 static void

  • 从zookeeper官方文档系统学习zookeeper

    从zookeeper官方文档系统学习zookeeper 1 zookeeper 2 zookeeper 文档 3 zookeeper 单机版 3 1 配置 3 2 启动 3 3 验证 4 zookeeper 集群版 4 1 配置 4 2 启

  • centos7 Jumpserver堡垒机部署以及使用详情

    一 跳板机 堡垒机的概念 1 跳板机 跳板机就是一台服务器 运维人员在使用管理服务器的时候 必须先连接上跳板机 然后才能去操控内网中的服务器 才能登录到目标设备上进行维护和操作 跳板机的缺点 仅仅实现服务器登录安全 但是没有实现对于运维人员

  • ChatGPT-Sorry, you have been blocked 解决办法

    使用无痕模式登录 已谷歌浏览器举例 右上点打开性的无痕模式 再访问地址 如下 可以继续登录了

  • Hadoop生态概述及常见报错

    Hadoop Hadoop是一个开源框架来存储和处理大型数据在分布式环境中 它包含两个模块 一个是MapReduce 另外一个是Hadoop分布式文件系统 HDFS MapReduce 它是一种并行编程模型在大型集群普通硬件可用于处理大型结

  • 亲测有效win10系统QQ音乐无法安装

    本人使用win10专业版时 因为一些原因 多次下载qq音乐都无法进入安装界面 找了很多原因都无法解决 最后在网上找到好像是因为火绒的原因 于是关闭火绒 再次尝试安装 遂成功 实在不行可以卸载火绒安全后重启电脑 再从官网重新下载QQ音乐安装包

  • 数据预处理-独热编码（One-Hot）

    1 部分特征如人的性别有男女 国家有中国 美国 法国等 并不是连续的 而是离散的 无序的 通常我们需要对其进行特征数字化 2 假如某个样本 某个人 他的特征是这样的 男 中国 乒乓球 我们可以用 0 0 4 来表示 但是这样的特征处理并不能

  • BeautifulSoup基本用法总结

    BeautifulSoup是Python的一个库 最主要的功能就是从网页爬取我们需要的数据 BeautifulSoup将html解析为对象进行处理 全部页面转变为字典或者数组 相对于正则表达式的方式 可以大大简化处理过程 0x01 安装 建

  • Leetcode 106. 从中序与后序遍历序列构造二叉树

    文章目录 题目 代码 9 18 首刷自解 题目 Leetcode 106 从中序与后序遍历序列构造二叉树 代码 9 18 首刷自解 class Solution public unordered map

  • UE4文字显示乱码“字字字字字字字字”的解决办法

    键盘win R 搜索fonts 2 滑到最底下右键复制 宋体常规简体字 3 复制到ue4项目的字体文件夹中 如下 注意在外部文件处复制 4 回到项目界面 此时右下角会有个弹窗提示是否确认导入 点击导入 然后会弹一个 字体样式导入选项 弹框

  • openGauss学习笔记-63 openGauss 数据库管理-资源池化架构

    文章目录 openGauss学习笔记 63 openGauss 数据库管理 资源池化架构 openGauss学习笔记 63 openGauss 数据库管理 资源池化架构 本文档主要介绍资源池化架构下的一些最佳实践和使用注意事项 用于支撑对相

  • go Cobra命令行工具入门

    简介 Github https github com spf13 cobra Star 26 5K Cobra是一个用Go语言实现的命令行工具 并且现在正在被很多项目使用 例如 Kubernetes Hugo和Github CLI等 通过使

  • Failed to set locale, defaulting to C.UTF-8解决方法

    CentOS 8Linux系统提示 Failed to set locale defaulting to C UTF 8 这是由于没有配置正确的语言环境导致的 Linux百科 使用root账户登录你的CentOS操作系统 然后执行两条命令

  • 现阶段计算机网络技术专业人才培养的发展对策

    确立具有高职特色的人才培养目标 在市场经济的条件下 人才培养首先要适应市场需求 以市场行业的需求为导 向制定人才培养目标 学校人才培养是否能满足社会需求 可以通过学生在对口行 业及相关领域的就业情况来衡量 高职教育培养高技能应用型人才 与研

  • Objective-C中的封装、继承、多态、分类

    封装 封装最好理解了 封装是面向对象的特征之一 是对象和类概念的主要特性 封装 也就是把客观事物封装成抽象的类 并且类可以把自己的数据和方法只让可信的类或者对象操作 对不可信的进行信息隐藏 继承 面向对象编程 OOP 语言的一个主要功能就是

  • 测试工具73款

    我们将本文的软件测试工具分为4类 1 Web应用测试工具 2 网站安全测试工具 3 跨浏览器测试工具 4 移动应用测试工具 注 工具排名没有任何意义 1 Web应用测试工具 我们列出了一些在Web应用程序上执行性能 负载和压力测试的关键工具

  • 开源项目MiniWord .NET Word 操作由Word模板和数据简单、快速生成文件

    MiniWord NET Word 介绍 MiniWord NET Word模板引擎 藉由Word模板和数据简单 快速生成文件 image Getting Started 安装 nuget link https www nuget org

  • ubuntu18.04命令安装ros2

    ROS2官方文档 本教程为apt get命令安装方式 官网教程有点问题 借鉴一下大佬的安装方式 文章目录 1 安装ROS2 1 1 安装秘钥相关指令 1 2 授权秘钥 1 3 添加ROS2软件源 1 4 安装 2 设置环境 可选但是推荐 2

  • vue路由器学习（个人学习笔记四）

    目录 友情提醒 第一章 路由简介 1 1 什么是路由 1 2 安装路由插件 第二章 自定义路由器 2 1 创建路由器文件index js文件 2 2 index js文件中配置路由信息 第三章 使用路由器 3 1 在main js文件中将路

热门标签