Vue2(完结):replace属性、编程式路由导航、缓存路由组件、两个新钩子、路由守卫、history与hash

一、router-link的replace属性

1、作用:控制路由跳转时操作浏览器历史记录的模式
2、浏览器的历史记录有两种写入方式:分别为push和replace,push是追加历史记录,replace是替换当前记录。路由跳转时候默认为push
3、如何开启replace模式:<router-link replace .......>News</router-link>

push是默认模式,可以前进后退,相当于指针指前面还是后面,而replace是指针指哪个就把它之前那个抹掉,就不能后退了。

如果about是push模式,home也是push、news和message是replace模式,我点了about之后再点home,about不会被划掉;我再点news和message都会划掉他们之前的,所以当我处于message页面时,我点返回返回的是about

二、编程式路由导航

作用:不借助<router-link> 实现路由跳转,让路由跳转更加灵活

router-link最终实现的不是a标签吗,只有用户点击链接才能实现跳转,那么我怎么实现不用router-link来跳转呢

1.设计两个按钮实现push和replace API

message写两个按钮实现push和replace

<button @click="pushShow(m)">push查看</button>
<button @click="replaceShow(m)">replace查看</button>
methods:{
    pushShow(m){
      this.$router.push({
        //不要去找route,route是一个规则,router是路由器,让干啥干啥
        name:'xiangqing',
        query:{
          id:m.id,
          title:m.title
        }
      })
    },
    replaceShow(m){
      this.$router.replace({
        //不要去找route,route是一个规则,router是路由器,让前进就前进
        name:'xiangqing',
        query:{
          id:m.id,
          title:m.title
        }
      })
    }
  }

2.设计三个按钮实现前进后退和go

在banner里面设计按钮:

      <button @click="back">后退</button>
      <button @click="forward">前进</button>
      <button @click="go">测试一下go</button>
 methods: {
    back() {
      this.$router.back();
    },
    forward() {
      this.$router.forward();
    },
    go(){
      this.$router.go();
      //填一个数字,正数的话就是前进x步,负数就是后退x步
    }
  },

三、缓存路由组件

实现news后面有一个input表单,输入东西之后点击message保单内的内容保留

在news里写完input之后,然后就不用在里面写东西了,因为我们最终是展现在home的组件里的,在它的<router-view></router-view>是控制news组件的

        <keep-alive include="myNews">
          <!-- 只有myNews可以保留缓存 -->
          <router-view></router-view>
        </keep-alive>

keep-alive可以保留缓存,include控制保留哪个的,因为也不是里面所有的组件都保留缓存,谁有需求包括谁,不缓存的话切换就重新挂载

注意:include后面的名字指的是组件名,在它自己组件的script 里面的export default 的name

include多个组件:

<keep-alive :include="['myNews','myMessage']">

四、两个新的生命周期钩子

实现news下面一行字透明度一直变,那么定时器的回调一直在执行,我切换到message我就不想让他再执行了,关掉keep-active?那input表单里的字也没了啊,用activeted和deactivated代替mountde和beforeDestory。

1、activated:路由组件被激活时触发(从没有出现在你面前–>组件出现在你眼前)。 相当于mounted
2、deactivated:路由组件失活时触发。类似于beforeDestroy

3.作用:路由组件所独有的两个钩子,用于捕获路由组件的激活状态。

<template>
  <ul>
    <li :style="{ opacity: opacity }">欢迎来到90年代</li>
    <li>news001 <input type="text" /></li>
    <li>news002 <input type="text" /></li>
    <li>news003 <input type="text" /></li>
  </ul>
</template>

<script>
export default {
  name: "myNews",
  data() {
    return {
      opacity: 1,
    };
  },
  // beforeDestroy() {
  //   clearInterval(this.timer);
  // },
  // mounted() {
  //   this.timer = setInterval(() => {
  //     console.log("定时器执行");
  //     this.opacity -= 0.01;
  //     if (this.opacity <= 0) this.opacity = 1;
  //   }, 16);
  // },
  activated() {
    this.timer = setInterval(() => {
      console.log("定时器执行");
      this.opacity -= 0.01;
      if (this.opacity <= 0) this.opacity = 1;
    }, 16);
  },
  deactivated() {
    clearInterval(this.timer);
  },
};
</script>

五、路由守卫

作用:对路由进行权限控制(我想让你看哪个,不想让你看哪个)
分类:全局守卫、独享守卫、组件内守卫

1.全局路由守卫

(1)全局前置守卫

实现只有学校atguigu才能查看message和news,让router去查看学校,

export default new VueRouter({
    routes:

这样写是创建了对象然后立马把route暴露出去了,在暴露之前得跟router商量一下

//全局前置路由守卫
//暴露之前加一个路由守卫,指定路由切换之前、初始化的时候调用的一个函数
router.beforeEach((to, from, next) => {
    //不调next啥都给你拦住
    //学校名atguigu才放

    if (to.path == 'myHome/myNews' || to.path == 'myHome/myMessage') {
        if (localStorage.getItem('school') == 'atguigu') {
            //要是去news或者message不让你看
            next()
        }else{
            alert('学校不对!')
        }
    }else{
        next()
    }
})
export default router

beforeEach三个参数to是到哪里去,from从哪儿来,next()继续往下进行

我们自己一点一点的判断name,其实可以直接写在route里,比如写peiqi:true,下面if判断to.peiqi为true往下走,但是那里面的配置项不能自定义,自定义的东西写在meta里

children: [
                {
                    path: 'myNews',
                    component: myNews,
                    meta:{isAuth:false}//是否授权,不用的那些写都不用写
                    //一级路由下的孩子路径就不用加/了
                },
                {
                    name: 'xiaoxi',
                    path: 'myMessage',
                    component: myMessage,
                    meta:{isAuth:false},
if (to.meta.isAuth) {//判断是否有权限
        if (localStorage.getItem('school') == 'atguigu') {
            //要是去news或者message不让你看
            next()
        }else{
            alert('学校不对!')
        }
    }else{
        next()
    }

(2)全局后置守卫

先来加一个功能,比如点击home,当前页面的标题就是主页,设置meta:title,前置里面放document的title

meta:{title:'关于'}
router.beforeEach((to, from, next) => {
document.title=to.meta.title

这样写有bug:1.在什么都不点的情况下它的标题就vue_test,我们可以这样设置

document.title=to.meta.title||'硅谷'

这样写在刚一进来的时候是由vue_test刷新到硅谷,因为在index.html里我们写的title是连接package-json读取项目名称作为title,把html的改成硅谷跟前置的一样就行
2.这样改完之后,我们学校不对的情况下点击message、news内容确实不展现但是title变了?!

写在每次放行next之前才行,写两次

router.beforeEach((to, from, next) => {
    //不调next啥都给你拦住
    //学校名atguigu才放
    if (to.meta.isAuth) {//判断是否有权限
        if (localStorage.getItem('school') == 'atguigu') {
            //要是去news或者message不让你看
            document.title = to.meta.title || '硅谷'
            next()
        } else {
            alert('学校不对!')
        }
    } else {
        document.title = to.meta.title || '硅谷'
        next()
    }
})

这样还得写两次,其实他就是后置的功能,要切换的时候加上,所以直接写后置就行

router.beforeEach((to, from, next) => {
    //不调next啥都给你拦住
    //学校名atguigu才放
    if (to.meta.isAuth) {//判断是否有权限
        if (localStorage.getItem('school') == 'atguigu') {
            //要是去news或者message不让你看
            next()
        } else {
            alert('学校不对!')
        }
    } else {
        next()
    }
})
//全局后置路由守卫指定路由切换之后、初始化的时候调用的一个函数
router.afterEach((to, from) => {
    //它没有next,前置是切换前调用next我就往下走,后置切换完成了不需要next
    console.log(to,from)
    document.title = to.meta.title || '硅谷'
})

3.独享路由守卫(只有前置)

某一个路由所单独享用的,独享只有前置但是可以和全局的后置搭配一起使用(你要修改title啥的)

我们现在给news写一个独享路由守卫,写在要鉴权的路由配置里面

                    name: 'xiaoxi',
                    path: 'myMessage',
                    component: myMessage,
                    beforeEnter: (to, from, next) => {
                        if (to.meta.isAuth) {//判断是否有权限
                            if (localStorage.getItem('school') == 'atguigu') {
                                next()
                            } else {
                                alert('学校不对!')
                            }
                        } else {
                            next()
                        }
                    },

跟前置的区别就是beforeEnter,Each是每个就是全局的意思

4.组件内路由守卫

以about为例,这儿也有个beforeRouteEnter和beforeRouteLeave,但是跟前后置不太一样,我从home来到about,先调一次前置进来了再调一次后置;

但是beforeRouteEnter是我进入about组件之前就调用然后就没有然后了;

我要是从about走了,再调用beforeRouteLeave

注意:beforeRouteLeave和Enter的使用前提是通过路由规则,离开/进入该组件时被调用,不是通过路由规则的可不会调用,通过路由规则进去就是点击组件进去,不通过路由规则还可以直接在页面引入然后<myAbout/>调用呢,这样的就不行

<script>
export default {
name:'myAbout',
beforeRouteEnter (to, from, next) {
   // 通过路由规则,进入该组件时被调用
   console.log('组件内路由守卫', to, from);
        if (to.meta.isAuth) {   //判断是否需要鉴权
            if (localStorage.getItem('school') === 'hznu') {
                next();  
            } else {
                alert('学校名不对!');
            }
        } else {
            next(); //放行
        }
},
beforeRouteLeave (to, from, next) {
   // 通过路由规则,离开该组件时被调用
   next()//得放行啊
   //注意那个document的title可不能在这儿写,那是后置的
}
}
</script>

5.组件从前置路由守卫到失活的执行流程

1.全局前置路由守卫 => 2.组件内路由守卫beforeRouteEnter => 3.全局后置路由守卫 => 4.mounted挂载组件 => 5.activated激活 => 6.组件内路由守卫beforeRouteLeave => 7.deactivated失活

六、路由器的两种工作模式

1.hash模式

路径的#是哈希值(hash),#后面的东西都不传给服务器

默认的开启哈希模式

特点:
1、地址中永远带着#号,不美观 。
2、若以后将地址通过第三方手机app分享,若app校验严格,则地址会被标记为不合法。
3、兼容性较好。

2.history模式

有历史记录的意思,如果想更改的话就在创建路由器的时候更改

const router = new VueRouter({
    mode:'history',

我们写完前端打包给后端的时候不是给人家vue、js文件,需要在终端输入npm run build命令,然后生成了一个dist文件夹

1、地址干净,美观 。
2、兼容性和hash模式相比略差。
3、应用部署上线时需要后端人员支持,解决刷新页面服务端404的问题。

3.解决history刷新报错的问题

打包出来的文件必须放在服务器上部署,接下来搭建一个node 用上express的微型服务器

history刷新就报错,如果你点到了news,一刷新他就去找服务器要home/news,根本没这个啊,但是hash就不是找服务器要资源(#后面的都不给服务器)

history模式上线解决:

终端输入npm i connect-history-api-fallback,然后use一下(必须得在静态资源之前use)

七、Vue UI组件库

1.移动端常用UI组件库

(1) Vant https://youzan.github.io/vant
(2) Cube UI https://didi.github.io/cube-ui 
(3)Mint Ul http://mint-ui.github.io

2.PC端常用UI组件库

(1)Element Ul    https://element.eleme.cn
(2) IView UI http://mint-ui.github.io

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/511110.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

HarmonyOS 应用开发之分布式数据对象跨设备数据同步

场景介绍 传统方式下&#xff0c;设备之间的数据同步&#xff0c;需要开发者完成消息处理逻辑&#xff0c;包括&#xff1a;建立通信链接、消息收发处理、错误重试、数据冲突解决等操作&#xff0c;工作量非常大。而且设备越多&#xff0c;调试复杂度也将同步增加。 其实设备…

深入理解 Vue3 中使用 v-model技术实现双向数据绑定

引言 在 Vue3 中&#xff0c;v-model 是一个非常有用的指令&#xff0c;它提供了一种简洁的方式来实现组件之间的双向数据绑定。本文将深入探讨 Vue3 中的 v-model 技术&#xff0c;包括它的工作原理、使用场景以及如何在自定义组件中应用 v-model。 一、v-model 的工作原理 在…

OpenHarmony实战:轻量带屏解决方案之恒玄芯片移植案例

本文章基于恒玄科技 BES2600W 芯片的欧智通 Multi-modal V200Z-R 开发板&#xff0c;进行轻量带屏开发板的标准移植&#xff0c;开发了智能开关面板样例&#xff0c;同时实现了 ace_engine_lite、arkui_ui_lite、aafwk_lite、appexecfwk_lite、HDF 等部件基于 OpenHarmony Lite…

探索Flutter框架对iOS应用打包与部署的最佳实践

本文探讨了使用Flutter开发的iOS应用能否上架&#xff0c;以及上架的具体流程。苹果提供了App Store作为正式上架渠道&#xff0c;同时也有TestFlight供开发者进行内测。合规并通过审核后&#xff0c;Flutter应用可以顺利上架。但上架过程可能存在一些挑战&#xff0c;因此可能…

HTML——5.表单、框架、颜色

一、表单 HTML 表单用于在网页中收集用户输入的数据&#xff0c;例如登录信息、搜索查询等。HTML 提供了一系列的表单元素&#xff0c;允许用户输入文本、选择选项、提交数据等。 <!DOCTYPE html> <html lang"en"> <head> <meta charset&q…

视频汇聚/安防监控/视频存储EasyCVR平台EasyPlayer播放器更新:新增【性能面板】

视频汇聚/安防监控/视频存储平台EasyCVR基于云边端架构&#xff0c;可以在复杂的网络环境中快速、灵活部署&#xff0c;平台视频能力丰富&#xff0c;可以提供实时远程视频监控、视频录像、录像回放与存储、告警、语音对讲、云台控制、平台级联、磁盘阵列存储、视频集中存储、云…

【嵌入式硬件】三极管伏安特性曲线-饱和区

1.三极管伏安特性 三极管工作电路如下图所示。 三极管伏安特性曲线 书本上的描述: 截止区:三极管工作在截止状态,当发射结的电压Ube 小于 导通电压(0.6V-0.7V),发射结没有导通;集电结处于反向偏置,没有放大作用。 放大区:三极管的发射极加正向电压(…

聚观早报 | 蔚来推出油车置换补贴;iPhone 16 Pro细节曝光

聚观早报每日整理最值得关注的行业重点事件&#xff0c;帮助大家及时了解最新行业动态&#xff0c;每日读报&#xff0c;就读聚观365资讯简报。 整理丨Cutie 4月02日消息 蔚来推出油车置换补贴 iPhone 16 Pro细节曝光 小米SU7创始版第二轮追加开售 OpenAI将在日本设立办事…

计算机网络-HTTP相关知识-RSA和ECDHE及优化

HTTPS建立基本流程 客户端向服务器索要并验证服务器的公钥。通过密钥交换算法&#xff08;如RSA或ECDHE&#xff09;协商会话秘钥&#xff0c;这个过程被称为“握手”。双方采用会话秘钥进行加密通信。 RSA流程 RSA流程包括四次握手&#xff1a; 第一次握手&#xff1a;客户…

vue项目入门——index.html和App.vue

vue项目中的index.html文件 在Vue项目中&#xff0c;index.html文件通常作为项目的入口文件&#xff0c;它包含了Vue应用程序的基础结构和配置。 该文件的主要作用是引入Vue框架和其他必要的库&#xff0c;以及定义Vue应用程序的启动配置。 import Vue from vue import App …

uniapp-打包app-图标配置

依次找到manifest->App图标配置&#xff0c;然后点击浏览&#xff0c;从本地文件夹中选择你们项目的logo&#xff0c;然后点击自动生成所有图标并替换&#xff0c;即可&#xff1a;

JS-23-原型继承

一、JS的原型继承 在传统的基于Class的语言如Java、C中&#xff0c;继承的本质是扩展一个已有的Class&#xff0c;并生成新的Subclass。 但是&#xff0c;JavaScript由于采用原型继承&#xff0c;根本不存在Class这种类型。 但是办法还是有的。我们先回顾Student构造函数&am…

【最佳实践】高效调优目标检测模型

【最佳实践】高效调优目标检测模型 数据层面算法层面CNN还是Transformer&#xff1f;学习率和优化器损失函数的权重正负样本平衡模型微调与迁移学习模型性能监控与早停可视化与模型解释超参数进化其他方面总结 在深入繁复的计算机视觉领域&#xff0c;目标检测无疑是一项挑战且…

Flutter仿Boss-3.登录页

效果 介绍 在Flutter应用程序中创建登录页面对于用户认证和参与至关重要。登录页面作为用户访问应用程序功能的入口。它应该提供无缝的体验&#xff0c;同时确保安全和隐私。这里仿Boss应用设计的登录页面&#xff0c;我们将创建一个登录页面&#xff0c;允许用户使用手机号码…

Photoshop 2024 Mac/win---图像处理的新纪元,解锁无限创意

Photoshop 2024是一款功能强大的图像处理软件&#xff0c;以其卓越的性能和广泛的应用领域&#xff0c;赢得了设计师、摄影师、图形艺术家等各类创意工作者的青睐。它提供了丰富的绘画和编辑工具&#xff0c;让用户能够轻松进行图片编辑、合成、校色、抠图等操作&#xff0c;实…

网站官网-首页源码html+css+js

网页设计与网站建设作业htmlcssjs 预览 说明 单页面&#xff0c;轮播图 获取&#xff1a;https://hpc.baicaitang.cn/2080.html

部署项目遇到的各种问题总结

文章目录 前言一、后端问题 jar包运行出现错误宝塔面板使用jdk17二、数据库问题 版本问题三、前端问题 连不上后端总结 前言 在做完项目之后&#xff0c;为了让别人访问到自己的网站&#xff0c;就需要部署前端后端以及数据库&#xff0c;但是在部署的过程中出现了各种问题和困…

Vue-Next-Admin:适配手机、平板、PC的开源后台管理模板

摘要&#xff1a;随着移动设备和PC的普及&#xff0c;为了满足不同设备的需求&#xff0c;开发一个能够自适应手机、平板和PC的后台管理系统变得至关重要。本文将介绍一个基于Vue3.x、Typescript、Vite、Element Plus等技术的开源模板库——Vue-Next-Admin&#xff0c;帮助开发…

界面组件DevExpress WinForms v23.2 - 进一步增强HTML CSS支持

DevExpress WinForms拥有180组件和UI库&#xff0c;能为Windows Forms平台创建具有影响力的业务解决方案。DevExpress WinForms能完美构建流畅、美观且易于使用的应用程序&#xff0c;无论是Office风格的界面&#xff0c;还是分析处理大批量的业务数据&#xff0c;它都能轻松胜…

CMakeLists.txt编写简单介绍:CMakeLists.txt同时编译.cpp和.cu

关于CMakeLists.txt的相关介绍,这里不赘诉,本人的出发点是借助于CMakeLists.txt掌握基本的C++构建项目流程,下面是本人根据网络资料以及个人实践掌握的资料。 CMakeList.txt构建C++项目 下图是一个使用CUDA实现hello world的项目,一般来说,一个标准的C++项目包括三个文件…