快速掌握Vue Router使用方法

目录
  • 一、编程式路由导航
  • 二、缓存路由组件
  • 三、两个新的声明周期钩子
  • 四、路由守卫
  • 五、路由器的两种工作模式

本篇博客会介绍Vue中的VueRouter的基本使用,编程式路由导航增加了我们进行路由跳转的灵活性,缓存路由组件保障了我们使用路由时的便捷性,生命周期钩子为我们切入切出路由时提供了初始化与善后的工作,路由守卫保障了我们路由组件的安全性,路由工作模式会使我们理解为啥Vue项目中的路由会有一个#,通过本篇博客会让大家快速掌握Vue中路由的基本使用。

一、编程式路由导航

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

具体编码:

//$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() //可前进也可后退

二、缓存路由组件

在上一篇博客中也提到过,路由对应的组件随着路由的切换来而被激活,随着路由的切换走而失活被销毁,在我们使用WebApp的时候当然不希望这样的事情发生,我们希望即使有路由的切换,也要保持原有的组件不被销毁。而缓存路由组件技术就可以完美的解决这个问题,只是在实现这一功能是会以一定的程序效率作为代价。下面咱们一起看一看如何实现路由对应组件的保活。使用到的标签是<keep-alive include="News"> </keep-alive>

作用:让不展示的路由组件保持挂载,不被销毁。

具体编码:

<keep-alive include="News">
    <router-view></router-view>
</keep-alive>

三、两个新的声明周期钩子

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

具体名字:

  • activated路由组件被激活时触发。
  • deactivated路由组件失活时触发。
<template>
  <ul>
    <li :style="{opacity}">欢迎学习Vue</li>
    <li v-for="p in messageList" :key="p.id">{{p.title}} <input type="text"></li>
  </ul>
</template>
<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "News",
  props:['id','title'],
  data() {
    return {
      messageList: [
        { id: "001", title: "消息001" },
        { id: "002", title: "消息002" },
        { id: "003", title: "消息003" },
      ],
      opacity:1
    };
  },
  activated() {
  			// 开启一个定时器,调整组件透明度
			console.log('News组件被激活了')
			this.timer = setInterval(() => {
				console.log('@')
				this.opacity -= 0.01
				if(this.opacity <= 0) this.opacity = 1
			},16)
		},
  deactivated() {
  	  //关闭定时器
      console.log('News组件失活了')
      clearInterval(this.timer)
  },
};
</script>
<style>
</style>

四、路由守卫

路由守卫中可以进行页面权限的验证,没有权限就没有办法进入到相应的页面之中。

作用:对路由进行权限控制

分类:全局守卫、独享守卫、组件内守卫

全局守卫(所有组件间路由跳转时都需要经过这两个守卫):

//全局前置守卫:初始化时执行、每次路由切换前执行
router.beforeEach((to,from,next)=>{
	console.log('beforeEach',to,from)
	if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
		if(localStorage.getItem('school') === 'atguigu'){ //权限控制的具体规则
			next() //放行
		}else{
			alert('暂无权限查看')
			// next({name:'guanyu'})
		}
	}else{
		next() //放行
	}
})
//全局后置守卫:初始化时执行、每次路由切换后执行
router.afterEach((to,from)=>{
	console.log('afterEach',to,from)
	if(to.meta.title){
		document.title = to.meta.title //修改网页的title
	}else{
		document.title = 'vue_test'
	}
})

上述两个函数,参数中都有from 与to,这两个是路由守卫中超级重要的角色,权限验证一般都有参照这两个参数进行。

除此之外前置守卫还有一个next参数,这个参数负责放行。可总结如下:

  • from:原始路由的一些基本信息
  • to:将要跳转的路由基本信息
  • next:如果不传参数为放行,就是跳转到to指定的路由,如果传参就跳转到参数指定的路由next(“/login”)

4.独享守卫:这种守卫方式只针对包含特定属性的路由起作用例如下面一个例子,前置路由守卫,只有要跳转的路由中的属性isAuth为true时才进入判断其他条件,否则会直接放行。通常我们会将用到的属性在路由配置里定义在meta中。

{
    name:"aboutroot",
    path:"/about",
    component:About,
    meta:{
        isTrue:true
    }
},
beforeEnter(to,from,next){
	console.log('beforeEnter',to,from)
	if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
		if(localStorage.getItem('school') === 'atguigu'){
			next()
		}else{
			alert('暂无权限查看')
			// next({name:'guanyu'})
		}
	}else{
		next()
	}
}

当然除了可以在meta中进行权限区分属性的定义,还可以做一些全局的配置,例如跳转路由之后的页面页签。

{
    name:"aboutroot",
    path:"/about",
    component:About,
    meta:{
        isTrue:true
        title:"About组件"
    }
},

使用:

这时当进入about组件时,就会显示页签为About组件,为了防止出错,我们做一些特殊处理以下代码在路由没有meta.title属性是会显示默认页签在页面的页签上。

router.afterEach((to,from)=>{
    console.log(to,from)
    document.title=to.meta.title || "默认页签"
})

效果如下面两个图片。

5.组件内守卫

下面两个路由执行的时间是在进入相应路由之前执行以及离开这个路由之前执行,可以进行鉴权。

//进入守卫:通过路由规则,进入该组件时被调用
beforeRouteEnter (to, from, next) {
},
//离开守卫:通过路由规则,离开该组件时被调用
beforeRouteLeave (to, from, next) {
}

下面一个实例表示在进入这个组件时先判断这个组间有没有isTrue属性,然后判断本地存储的学校是不是nylg,只有经过两层验证之后才可以进入该组件,否则将提示进不去。

<template>
  <div class="col-xs-6">
    <div class="panel">
      <div class="panel-body">
        <h2>我是About的内容</h2>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "About",
  beforeRouteEnter(to,from,next){
    // alert("想要进入组件!")
    if(to.meta.isTrue){
      if(localStorage.getItem("school")==="nylg"){
        next()
      }else{
        alert("您无权进入!")
      }
    }else{
      alert("组件不允许进入!")
    }
  },
  //通过路由规则,离开该组件时被调用
  beforeRouteLeave (to, from, next) {
    console.log('About--beforeRouteLeave',to,from)
    next()
  }
};
</script>
<style>
</style>

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

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

hash值不会包含在 HTTP 请求中,即:hash值不会带给服务器。

hash模式:

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

history模式:

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

进行history配置会很麻烦,而且使用Vue时语法上要有一些改变,所以如果不是大型公司或者大型项目使用hash模式即可。感兴趣的同学也可以自己探索history模式。

到此这篇关于快速掌握Vue Router使用方法的文章就介绍到这了,更多相关Vue Router内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • routeros admin忘记密码的解决方法

    我在虚拟机里面做个示范,希望大家在需要的时候可以用的上 1 工具准备   打开 http://adelie.polymtl.ca/releases/x86/current/installcd/   找里面的iso文件下载,因为文件有的时候因为版本的改变而文件名称改变,所以这里只给出下载的目录位置 2 直接将iso文件刻盘,不会刻盘或者没有刻录机的自己想办法 3 将ros关机,用这个刻好的盘启动,等待出现livecd root# 开始输入命令 我们现在看到有hda hda1 hda2三个这里简要的

  • Vue Router 实现登录后跳转到之前想要访问的页面

    目录 简介 简单示例 补充用户退出时的处理 进阶 简介 该功能主要用于判定用户权限,在用户无权限时重定向至登录页,并在用户完成登录后,再定向至用户之前想要访问的路由:或者用户在任意路由点击登录时,登录成功后返回当前路由.是一个很常规的小功能. 简单示例 本文仅演示路由跳转和导航守卫相关代码的实现,不包含具体的权限验证和登录请求. 实现该功能主要分为四步: 在登录组件的路由配置对象中添加 props: route => ({ redirect: route.query.redirect }) 在登

  • Vue router配置与使用分析讲解

    目录 说明 一.安装及配置 二.在html中使用 HTML router-link router-view 三.路由的基本使用 四.动态路由的添加 说明 本教程适用于vue3中的路由vue-router@4,的配置及使用 安装及配置 路由的基本使用 动态路由的添加 路由守卫 找不到路由配置(path: ‘/:pathMatch(.)’,) 一.安装及配置 安装 npm install vue-router@4 配置 //自己创建的router文件中 import { createRouter,

  • Vue3的vue-router超详细使用示例教程

    目录 搭建vue3环境 vue-router入门(宝宝模式) vue-router基础(青年模式) 一.动态路由匹配 1.带参数的动态路由匹配 2.捕获所有路由或404 Not Found路由 二.嵌套路由 三.编程式导航 1.router.push()方法的使用 2.router.replace()方法的使用 3.router.go()方法的使用 搭建vue3环境 我们使用vite来搭建vue3环境(没有安装vite需要去安装vite) npm create vite routerStudy

  • 快速掌握Vue Router使用方法

    目录 一.编程式路由导航 二.缓存路由组件 三.两个新的声明周期钩子 四.路由守卫 五.路由器的两种工作模式 本篇博客会介绍Vue中的VueRouter的基本使用,编程式路由导航增加了我们进行路由跳转的灵活性,缓存路由组件保障了我们使用路由时的便捷性,生命周期钩子为我们切入切出路由时提供了初始化与善后的工作,路由守卫保障了我们路由组件的安全性,路由工作模式会使我们理解为啥Vue项目中的路由会有一个#,通过本篇博客会让大家快速掌握Vue中路由的基本使用. 一.编程式路由导航 作用:不借助<rout

  • Vue Router应用方法详解

    目录 服务端路由 路由的应用场景 路由 监听浏览器 hashchange 事件实现路由 使用Vue Router+Vue2实现路由 服务端路由 服务端路由时指的是服务器根据用户访问的 URL 路径返回不同的响应结果. 在传统的服务端渲染的 web 应用中点击一个链接时,浏览器会从服务端获得全新的 HTML页面,然后重新加载整个页面. 然而,在单页面应用中,客户端的 JavaScript 可以拦截页面的跳转请求,动态获取新的数据,无需重新加载的情况下更新当前页面. 这样通常可以带来更顺滑的用户体验

  • vue router下的html5 history在iis服务器上的设置方法

    首先先照搬下官网的介绍 当你使用 history 模式时,URL 就像正常的 url,例如 http://yoursite.com/user/id,也好看! 不过这种模式要玩好,还需要后台配置支持.因为我们的应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404,这就不好看了. 所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个index.html 页面,

  • vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法

    解决vue-router嵌套路由(子路由)在history模式下刷新无法渲染页面的问题,具体内容如下 一. 异常描述 本来使用的是vue-router的hash模式,但是hash模式下url需要带"#"符号,不仅看起来不舒服,而且有些场景下是会破坏路由中的"#"(微信分享页面就会把"#"后边的内容处理掉),所以就需要使用history模式,然后就让后端改下nginx配置: location / { try_files $uri $uri/ /in

  • Vue Router history模式的配置方法及其原理

    vue-router分为 hash和 history模式,前者为其默认模式,url的表现形式为 http://yoursite.com#home,比较难看.后者的url表现形式为 http://yoursite.com/home,比较美观. 但如果要使用 history模式,我们需要在后端进行额外配置.本文将讨论如何配置以及为什么要这样配置. history模式的配置方法 我们来看看官方文档是教我们怎么配置的:HTML5 History 模式. 首先要将 mode设置为 history: con

  • vue router 跳转时打开新页面的示例方法

    记录一下在vue项目中如何实现跳转到一个新页面(一个比较简单又比较基础的问题了),有两个方法: 1.<vue-link>标签实现新窗口打开 官方文档中说 v-link 指令被 <router-link> 组件指令替代,且 <router-link> 不支持 target="_blank" 属性,如果需要打开一个新窗口必须要用 <a> 标签,但事实上vue2版本的 <router-link> 是支持 target="_

  • 关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法

    #在切换路由时,组件会被复用,不过,这也意味着组件的生命周期钩子不会再被调用. 解决办法有两种,1简单地 watch (监测变化) $route 对象: const User = { template: '...', watch: { '$route' (to, from) { // 对路由变化作出响应... } } } 2.使用 2.2 中引入的 beforeRouteUpdate 导航守卫: const User = { template: '...', beforeRouteUpdate

  • Vue Router的懒加载路径的解决方法

    单页应用产出的入口chunk大小随着业务的复杂度线性增加,导致后期加载速度越来越慢.后面就需要对不同路径下的模块进行拆分,打包到相应的chunk下,按需加载,找到chunk的大小.个数和页面加载速度的平衡点. 解决办法 .vue模块文件按需加载,其实要做到两件事情:一是标记出这是一个异步组件:二是通知webpack把该组件单独产出为一个chunk. vue的异步组件 官网给出的异步组件写法:异步组件是一个函数,函数的返回值是一个Promise,只是Promise的resolve函数的参数是常规组

  • vue router带参数页面刷新或回退参数消失的解决方法

    写在前面: 传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题.有需要的朋友可以做一下参考,喜欢的可以点波赞,或者关注一下,希望可以帮到大家. Vue router如何传参 params.query是什么? params:/router1/:id ,/router1/123,/router1/789 ,这里的id叫做params query:/router1?id=123 ,/router1?id=456

  • vue router路由嵌套不显示问题的解决方法

    vue router路由嵌套不显示问题的解决方法,具体内容如下 路由嵌套,vue2.0 router中嵌套路由不成功,如何解决? 我先说下我的需求,例如下图 我本来是想打算将中间的模块做一层子路由(test模块),模块代码没错,每次编译都正常好使. 但是打开编译后的文件之后,一直都是==只能渲染一级路由,子路由没有效果,==,查了一推资料. 帖子说:子路由多写了/, 会默认从根目录开始匹配,我试着也删除掉这些东西,但是后来发现,我的问题并不是这个原因造成的,原因在于,在子模块里面引用子路由,也是

随机推荐