vue路由插件之vue-route


Posted in Javascript onJune 13, 2019

vue路由插件,vuer Router,使vue官方的路由管理其,和vue高度耦合

1.vue-Router的使用

import Vue from 'vue'
import Router from 'vue-router' //引入路由组件

Vue.use(Router)

new Router({
  mode: 'history', //路由的两种模式 hash 和history 默认使history模式
  routes: [
  {
   path: '/',
   name: 'home',
   component: () => import(xxx.vue)
  },
  {
   path: '/about',
   name: 'about',
   component: () => import()
  }
 ]
})

2.路由的跳转

this.$router.push('/path')

this.$router.push({name:'routername'})

路由的get方式传值

this.$router.push({name:'routername',query:{id:xxx}})

路由的post方式传值

this.$router.push({name:'routername',params:{id:xxx}})

3.路由的后退

this.$router.go(-1) 

this.$router.back()

4.路由的前进

this.$router.forward() 

5.替换当前路由,在路由历史中不会再出现该路由

this.$router.replace(location)

6.当前路由的对象属性(一定要记得是小写的$route,并且没有r)

this.$route.path   当前路由路径 path

this.$route.name  当前路由名称

this.$route.params.id  post方式传参时,获取id的值

this.$route.query.id get方式传参时获取id的值

this.$route.hash 当前路由的hash值,带#

7.linkActiveClass

当前激活的路由的class类名,默认是"router-link-active"

8.scrollBehavior 

切换路由时页面滚动到具体位子

9.router-link 中的tag标签,生成具体的标签的html 元素

10.router-view 路由组件具体渲染的地方

11.全部的路由钩子函数(导航首位)

11.1router.beforeEach  全局前置首位

11.2router.beforeResolve 全局解析守卫

11.3router.afterEach 全局后置守卫

11.4beforeEnter 路由独享守卫

组件内守卫

11.5beforerouteEnter 进入

11.6beforerouteUpdate  更新

11.7beforerouteLeave 离开

/* 全局前置守卫 */
router.beforeEach(function (to, from, next) {
 // to 将要进路的路由 route
 // from 离开的路由 route
 // next 进入下一个路由,不调用则不会进入下一个路由
 console.log('全局前置守卫')
 next()
})

/* 全局解析守卫 */
router.beforeResolve((to, from, next) => {
 // to 将要进路的路由 route
 // from 离开的路由 route
 console.log('全局解析守卫')
 next()
})

/* 全局后置守卫 */
router.afterEach((to, from) => {
 // to 将要进路的路由 route
 // from 离开的路由 route
 console.log('全局后置守卫')
})
/* 组件独享守卫 */
   beforeEnter(to, from, next) {
    console.log('组件内独享守卫')
    next()
   }
 beforeRouteEnter(to, from, next) {
  console.log('组件内守卫进入')
  next()
 },
 beforeRouteUpdate(to, from, next) {
  console.log('组件内守卫更新')
  next()
 },
 beforeRouteLeave(to, from, next) {
  console.log('组件内守卫离开前')
  next()
 }

执行顺序,

1.前组件内守卫离开

2.全局前置守卫

3.路由独享守卫

4.组件内守卫进入

5.全局解析守卫

6.全局后置守卫

或者时刷新组件时(/about 跳转到/about?id=1111)

1.全局前置守卫

2.组件内守卫更新

3.全局解析守卫

4.全局后置守卫

总结

以上所述是小编给大家介绍的vue路由vue-route的实例代码,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧!

Javascript 相关文章推荐
Angularjs全局变量被作用域监听的正确姿势
Feb 06 Javascript
Easyui Treegrid改变默认图标的方法
Apr 29 Javascript
原生JS封装ajax 传json,str,excel文件上传提交表单(推荐)
Jun 21 Javascript
详解利用exif.js解决ios手机上传竖拍照片旋转90度问题
Nov 04 Javascript
如何正确理解javascript的模块化
Mar 02 Javascript
H5图片压缩与上传实例
Apr 21 Javascript
JS实现的随机排序功能算法示例
Jun 09 Javascript
基于jQuery封装的分页组件
Jun 26 jQuery
JS获取一个表单字段中多条数据并转化为json格式
Oct 17 Javascript
mpvue全局引入sass文件的方法步骤
Mar 06 Javascript
JavaScript禁止右击保存图片,禁止拖拽图片的实现代码
Apr 28 Javascript
原生JavaScript实现幻灯片效果
Feb 19 Javascript
在JavaScript中使用严格模式(Strict Mode)
Jun 13 #Javascript
详解vuex之store源码简单解析
Jun 13 #Javascript
vue store之状态管理模式的详细介绍
Jun 13 #Javascript
微信小程序页面间跳转传参方式总结
Jun 13 #Javascript
微信小程序位置授权处理方法
Jun 13 #Javascript
json数据格式常见操作示例
Jun 13 #Javascript
微信小程序实现渐入渐出动画效果
Jun 13 #Javascript
You might like
php htmlspecialchars加强版
2010/02/16 PHP
一页面多XMLHttpRequest对象
2007/01/22 Javascript
Open and Print a Word Document
2007/06/15 Javascript
ExtJS扩展 垂直tabLayout实现代码
2009/06/21 Javascript
String.prototype实现的一些javascript函数介绍
2013/11/22 Javascript
比较常见的javascript中定义函数的区别
2015/11/09 Javascript
理解javascript中的with关键字
2016/02/15 Javascript
浏览器复制插件zeroclipboard使用指南
2016/03/26 Javascript
浅谈JavaScript的闭包函数
2016/12/08 Javascript
详解用vue-cli来搭建vue项目和webpack
2017/04/20 Javascript
如何使用JS在HTML中自定义字符串格式化
2017/07/20 Javascript
Web技术实现移动监测的介绍
2017/09/18 Javascript
Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
2018/01/26 Javascript
在vue项目中使用Nprogress.js进度条的方法
2018/01/31 Javascript
react-navigation之动态修改title的内容
2018/09/26 Javascript
JavaScript检查数据中是否存在相同的元素(两种方法)
2018/10/07 Javascript
JS跨域请求的问题解析
2018/12/03 Javascript
Vue.js路由实现选项卡简单实例
2019/07/24 Javascript
python的正则表达式re模块的常用方法
2013/03/09 Python
Python查看多台服务器进程的脚本分享
2014/06/11 Python
pandas object格式转float64格式的方法
2018/04/10 Python
Python3连接SQLServer、Oracle、MySql的方法
2018/06/28 Python
深入浅析Python中list的复制及深拷贝与浅拷贝
2018/09/03 Python
Python打包方法Pyinstaller的使用
2018/10/09 Python
python把1变成01的步骤总结
2019/02/27 Python
Python动态强类型解释型语言原理解析
2020/03/25 Python
python实现斗地主分牌洗牌
2020/06/22 Python
Node.js 和 Python之间该选择哪个?
2020/08/05 Python
CSS3中几个新增加的盒模型属性使用教程
2016/03/01 HTML / CSS
HTML5中FileReader接口使用方法实例详解
2017/08/26 HTML / CSS
意大利体育用品网上商城:Nencini Sport
2016/08/18 全球购物
真正的英国宝藏:Mappin & Webb
2019/05/05 全球购物
数据库设计的包括哪两种,请分别进行说明
2016/07/15 面试题
工地门卫岗位职责
2013/12/30 职场文书
高中校园广播稿3篇
2014/09/29 职场文书
公文写作指导之倡议书!
2019/07/03 职场文书