Vue2-replace属性、编程式路由导航、缓存路由组件、两个新的生命周期钩子、路由守卫、路由器工作模式

这篇具有很好参考价值的文章主要介绍了Vue2-replace属性、编程式路由导航、缓存路由组件、两个新的生命周期钩子、路由守卫、路由器工作模式。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

🥔:如果事与愿违,那一定是上天另有安排

更多Vue知识请点击——Vue.js

router-link的replace属性

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

  • 如果你用的是默认的push,你点击进入到下一个路由的时候可以返回到上一个路由
  • 如果你用的是replace,你点击进入到下一个路由的时候,浏览器左上角不会有返回上一步

编程式路由导航

1、什么是编程式路由导航

不借助<router-link> 实现路由跳转,让路由跳转更加灵活,主要是用$router的三个api pushreplace,go(了解)来实现路由跳转,push是默认带缓存,replace是覆盖缓存

2、如何编码

语法:

//$router的两个API
this.$router.push({
	name:'xiangqing',
		params:{
			id:xxx,
			title:xxx
		}
})

this.$router.replace({
	name:'xiangqing',
		params:{
			id:xxx,
			title:xxx
		}
})
// 点了以后浏览器的前进后退操作
this.$router.forward() //前进
this.$router.back() //后退
this.$router.go() //可前进也可后退,5前进5步,-3后退3步

3、使用案例示例说明

不借助router-link,可以实现往哪里跳转,什么时候跳转(加定时器)
Vue2-replace属性、编程式路由导航、缓存路由组件、两个新的生命周期钩子、路由守卫、路由器工作模式,Vue2+Vue3,vue.js,前端,javascript,前端框架,缓存

Vue2-replace属性、编程式路由导航、缓存路由组件、两个新的生命周期钩子、路由守卫、路由器工作模式,Vue2+Vue3,vue.js,前端,javascript,前端框架,缓存

缓存路由组件

作用:让不展示的路由组件保持挂载,不被销毁(比如切换时要保留表单数据)。
使用:在放router-view标签的地方,包边包一个<keep-alive></keep-alive>,不加include默认这里边的组件都保持挂载,加include后边跟要挂载的组件名字

// 缓存一个路由组件用 字符串
<keep-alive include="News"> 
    <router-view></router-view>
</keep-alive>

 // 缓存多个路由组件用 数组 (使用 `v-bind`) 
<keep-alive :include="['News', 'Message']">
     <router-view></router-view>
</keep-alive>

注意:

  • 缓存里面的include里面的名字是组件名
  • 在需要被缓存组件的外侧包裹keep-alive!不要去被缓存组件的template里边包!

Vue2-replace属性、编程式路由导航、缓存路由组件、两个新的生命周期钩子、路由守卫、路由器工作模式,Vue2+Vue3,vue.js,前端,javascript,前端框架,缓存

如果像图中<keep-alive include="News">这么写的话,切换到MessageNews不会销毁,但是从Message切换到NewsMessage会销毁。

两个新的生命周期钩子

我们之前学习了生命周期以及八个生命周期钩子——点此复习生命周期

现在我们再学习路由组件独有的两个钩子,用于捕获路由组件的激活状态

还记得之前做的那个字体闪烁案例吗?在这里再做一遍,写在News组件里,循环变化透明度,但是你想离开这个选项卡时让定时器停,就要走销毁流程,但是News里面的input输入框数据要保留,又不能被销毁

这种情况就很尴尬了,如果想要实现组件出现时开启定时器,组件切换时关闭定时器且保留数据,就要使用两个新的生命周期钩子,是路由组件独有的钩子:

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

<template>
  <ul>
    <li :style="{ opacity }">你好啊,小土豆</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: 'News',
  data() {
    return {
      a: false,
      opacity: 1,
    }
  },
  // mounted() {
  //   this.timer = setInterval(() => {
  //     this.opacity -= 0.01
  //     if (this.opacity <= 0) this.opacity = 1
  //   }, 16)
  // },
  // beforeDestroy() {
  // console.log('News组件即将被销毁');
  //   clearInterval(this.timer)
  // },
  activated() {
    console.log('News组件被激活了')
    this.timer = setInterval(() => {
      this.opacity -= 0.01
      if (this.opacity <= 0) this.opacity = 1
    }, 16)
  },
  deactivated() {
    console.log('News组件失活了')
    clearInterval(this.timer)
  },
}
</script>

路由守卫

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

1、路由元信息

是配置路由规则时专门提供的一个容器meta,用来存放我们自定义的一些属性。

Vue2-replace属性、编程式路由导航、缓存路由组件、两个新的生命周期钩子、路由守卫、路由器工作模式,Vue2+Vue3,vue.js,前端,javascript,前端框架,缓存
Vue2-replace属性、编程式路由导航、缓存路由组件、两个新的生命周期钩子、路由守卫、路由器工作模式,Vue2+Vue3,vue.js,前端,javascript,前端框架,缓存
Vue2-replace属性、编程式路由导航、缓存路由组件、两个新的生命周期钩子、路由守卫、路由器工作模式,Vue2+Vue3,vue.js,前端,javascript,前端框架,缓存

2、全局路由守卫

(1)全局前置守卫

全局前置守卫:初始化时执行、每次路由切换前执行
使用下面的api,有三个参数,分别是to到哪里去,from从哪里来,next下一步(放行)

router.beforeEach((to,from,next)=>{ })

其中router是自定义的路由规则的名字const router = new VueRouter({})
比如我要设置只有本地存储中school为potato的可以查看新闻和消息,那就要在前置路由守卫中设置,如果符合条件,才能放行

//全局前置路由守卫————初始化的时候被调用、每次路由切换之前被调用
router.beforeEach((from, to, next) => {
  console.log('前置路由守卫', from, to)

  //判断是否需要鉴权
  // if (to.path === '/home/news' || to.path === '/home/message')
  // if (to.name === 'xinwen' || to.name === 'xiaoxi')
  if (to.meta.isAuth) {
    if (localStorage.getItem('school') === 'potato') {
      next() //放行
    } else {
      alert('学校名不对,无权查看!')
    }
  } else {
    next()  //放行
  }
})
(2)全局后置守卫

全局后置守卫:初始化时执行、每次路由切换后执行
使用下面的api,有两个参数,分别是to到哪里去,from从哪里来

注意后置守卫没有next

router.afterEach((to,from)=>{ })

比如我要设置不同的模块显示不同的网页title,那么就要在等进入该模块成功后再设置,也就是要设置在全局后置守卫中

//全局后置路由守卫————初始化的时候被调用、每次路由切换之后被调用
//注意:后置路由守卫没有next
router.afterEach((from, to) => {
  console.log('后置路由守卫', from, to)
  document.title = to.meta.title || '土豆土豆'
})

3、独享路由守卫

独享路由守卫:某一个路由单独享用的守卫
注意:独享路由只有beforeEnter,没有afterEnter,但可以配合全局后置守卫使用。

独享路由守卫的写法和全局路由守卫的一样,但是要写在指定的路由配置中。

Vue2-replace属性、编程式路由导航、缓存路由组件、两个新的生命周期钩子、路由守卫、路由器工作模式,Vue2+Vue3,vue.js,前端,javascript,前端框架,缓存

这样配置了之后,查看新闻模块时就会校验权限。

4、组件内路由守卫

组件内路由守卫:在组件内写路由守卫,该组件独有的路由守卫。

(1)进入组件时

beforeRouteEnter(to,from,next){}必须通过路由规则进入,写组件标签进入不行,而且是进入路由组件时调用(相当于前置路由守卫),to为当前组件

(2)离开组件时

beforeRouteLeave(to,from,next)得触发路径的变化,前端浏览器检测到了才允许离开, 离开组件时调用这个函数,在后置路由守卫之后。

(3)给About组件添加一个路由守卫
<template>
  <h2>我是About</h2>
</template>

<script>
export default {
  name: 'About',
  //通过路由规则,进入该组件时被调用
  beforeRouteEnter(to, from, next) {
    console.log('About--beforeRouteEnter')
    if (to.meta.isAuth) {
      if (localStorage.getItem('school') === 'potato') {
        next()  //放行
      } else {
        alert('学校名不对,无权查看!')
      }
    } else {
      next()  //放行
    }
  },
  //通过路由规则,离开该组件时被调用
  beforeRouteLeave(to, from, next) {
    console.log('About--beforeRouteLeave')
    next()  //放行
  },
}
</script>

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

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

路由器的两种工作模式

1、hash模式

对于一个url来说,什么是hash值?——”#“以及后面的内容就是hash值。

比如一个url为:

localhost:8080/#/home/message/detail

一般出现了”#“就知道这是hash模式,但是hash值不会包含在HTTP请求中,也就是说:hash值不会带给服务器。

特点:

  1. 地址中永远带着#号,不美观 。

  2. 若以后将地址通过第三方手机app分享,若app校验严格,则地址会被标记为不合法。

  3. 兼容性较好。

2、history模式

localhost:8080/home/message/detail

特点:

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

注意:路由器的默认工作模式是hash模式

如果想改的话,去创建路由规则的地方更改mode属性:

Vue2-replace属性、编程式路由导航、缓存路由组件、两个新的生命周期钩子、路由守卫、路由器工作模式,Vue2+Vue3,vue.js,前端,javascript,前端框架,缓存

3、解决history刷新报错问题

后端安装中间件connect-history-api-fallback
这个插件可以帮助分辨是前端路由还是后端请求,从而避免报错

Vue2-replace属性、编程式路由导航、缓存路由组件、两个新的生命周期钩子、路由守卫、路由器工作模式,Vue2+Vue3,vue.js,前端,javascript,前端框架,缓存文章来源地址https://www.toymoban.com/news/detail-687258.html

到了这里,关于Vue2-replace属性、编程式路由导航、缓存路由组件、两个新的生命周期钩子、路由守卫、路由器工作模式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue路由导航(replace、push、forward、back、go)

    栈的数据结构:先进后出,后进先出。 原理:push将元素压入栈内,pop将元素弹出,栈有分别有栈底指针和栈顶指针,指向栈内最低和最高的元素。 浏览器中的前进和后退的按钮也是使用了栈的数据结构实现,但也有不同。对于浏览器而言,分别有两种属性: push属性(推进

    2024年02月06日
    浏览(40)
  • 路由缓存问题 | vue-router的导航守卫

             带参路由,当 参数发生变化时,相同的组件实例将被复用 ,组件的 生命周期钩子不会被调用, 导致 请求不会被重新发送, 以至于 数据无法更新 。 两种解决方法: 1. 给 RouterView绑定key值 ,即 特点:不复用,破坏组件缓存,强制执行,存在一定的 浪费 ,即

    2024年02月09日
    浏览(41)
  • Vue路由组件的缓存keep-alive和include属性

    功能:浏览器页面在进行切换时,原有的路由组件会被销毁。通过缓存可以保存被切换的路由组件。 例子:在页面上填好的信息当进行页面切换再转回原来的页面时,原本信息被清空了需要重新填写 功能:切换路由时,保留被切换路由组件。 格式: keep-alive router-view/ keep-

    2024年02月06日
    浏览(40)
  • React Router 中的路由导航方法:push() 和 replace() 详解

    在 React Router 中, this.props.history.push() 和 this.props.history.replace() 是用于编程式导航的两个常用方法。它们允许我们在组件中动态地更改路由,并可选地传递状态参数。本文将介绍这两个方法的用法和区别。 push() 方法将在导航时创建一个新的历史记录条目,并将用户重定向到新

    2024年03月15日
    浏览(45)
  • vue2实现自定义主题webpack-theme-color-replacer

    需求:根据element的自定义主题色,之后改变element的全局所有颜色,解决页面刷新后主题色失效问题,这个需要把颜色存入到浏览器的存储中,如果换个浏览器就得重新选择了哈,如果需要在不同的浏览器保持一致的主题,需要跟后端沟通 之前还写过一个简单的,有需要的可

    2024年02月07日
    浏览(48)
  • Vue2-导航守卫

    在Vue中,导航守卫是一组用于控制路由导航的钩子函数。这些钩子函数允许你在路由导航的不同阶段执行一些操作,比如在路由切换之前进行验证、处理路由变化等。 Vue提供了三种类型的导航守卫: 全局前置守卫 :在路由切换之前执行,适用于整个应用的路由。 路由独享的

    2024年01月23日
    浏览(38)
  • 微信小程序开发学习之页面导航(声明式导航和编程式导航)

    页面导航指的是页面之间的相互跳转。 小程序中实现页面导航的两种方式: 声明式导航 ● 在页面上声明一个 navigator 导航组件 ● 通过点击 navigator 组件来实现页面的跳转 编程式导航 ● 调用小程序的导航API,实现页面的跳转 1.1.1. 导航到tabBar页面 tabBar 页面指的是被配置为

    2024年02月15日
    浏览(50)
  • vue2+element-ui实现侧边导航栏

    编写 client/src/components/LeftMenu.vue ,创建侧边导航栏: 编辑 client/src/views/Index.vue ,引入侧边导航栏:

    2024年02月02日
    浏览(46)
  • Vue2中给对象添加新属性界面不刷新

    Vue2.x的响应式 实现原理 对象类型:通过 Object.defineProperty() 对属性的读取、修改进行拦截(数据劫持)。 数组类型:通过重写更新数组的一系列方法来实现拦截。(对数组的变更方法进行了包裹)。 存在问题 新增 属性、 删除 属性, 界面不会更新。 直接通过 下标修改 数组

    2024年02月07日
    浏览(37)
  • Vue2(生命周期,列表排序,计算属性和监听器)

    前言 上一章博客我们讲解了Vue基础 这一章我们来讲Vue生命周期,列表过滤,计算属性和监听器 一,生命周期 通常也叫生命周期回调函数、生命周期函数、生命周期钩子 vue初始化时在不同的阶段调用的不同函数 生命周期函数的 this 指向为vue实例,名字不能更改 1.1,生命周期函

    2024年02月13日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包