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 相关文章推荐
js和php如何获取当前url的内容
Sep 22 Javascript
javascript中with()方法的语法格式及使用
Aug 04 Javascript
jQuery异步上传文件插件ajaxFileUpload详细介绍
May 19 Javascript
vue.js学习笔记:如何加载本地json文件
Jan 17 Javascript
JS动态生成年份和月份实例代码
Feb 04 Javascript
JavaScript定时器setTimeout()和setInterval()详解
Aug 18 Javascript
微信小程序表单验证功能完整实例
Dec 01 Javascript
详解如何在你的Vue项目配置vux
Jun 04 Javascript
使用layui+ajax实现简单的菜单权限管理及排序的方法
Sep 10 Javascript
JavaScript将数组转换为链表的方法
Feb 16 Javascript
Vue自定义组件双向绑定实现原理及方法详解
Sep 03 Javascript
解决antd Form 表单校验方法无响应的问题
Oct 27 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
便携利器 — TECSUN PL-365简评
2021/03/02 无线电
全世界最小的php网页木马一枚 附PHP木马的防范方法
2009/10/09 PHP
php file_get_contents抓取Gzip网页乱码的三种解决方法
2013/11/12 PHP
php实现的短网址算法分享
2014/06/20 PHP
Laravel实现构造函数自动依赖注入的方法
2016/03/16 PHP
推荐11款jQuery开发的复选框和单选框美化插件
2011/08/02 Javascript
基于JavaScript怎么实现让歌词滚动播放
2015/11/03 Javascript
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
2015/12/03 Javascript
JavaScript中的原型prototype完全解析
2016/05/10 Javascript
Javascript闭包与函数柯里化浅析
2016/06/22 Javascript
Vue.js实现简单动态数据处理
2017/02/13 Javascript
Angular.js去除页面中显示的空行方法示例
2017/03/30 Javascript
JavaScript数据结构中栈的应用之表达式求值问题详解
2017/04/11 Javascript
微信小程序 实现列表项滑动显示删除按钮的功能
2017/04/13 Javascript
nodejs异步编程基础之回调函数用法分析
2018/12/26 NodeJs
JQuery判断radio单选框是否选中并获取值的方法
2019/01/17 jQuery
vue中npm包全局安装和局部安装过程
2019/09/03 Javascript
在vscode 中设置 vue模板内容的方法
2020/09/02 Javascript
[16:21]教你分分钟做大人:圣堂刺客
2014/12/03 DOTA
用实例解释Python中的继承和多态的概念
2015/04/27 Python
python 编程之twisted详解及简单实例
2017/01/28 Python
pandas通过loc生成新的列方法
2018/11/28 Python
Python学习笔记之图片人脸检测识别实例教程
2019/03/06 Python
python实现nao机器人身体躯干和腿部动作操作
2019/04/29 Python
Python Unittest原理及基本使用方法
2020/11/06 Python
分享PyCharm最新激活码(真永久激活方法)不用每月找安装参数或最新激活码了
2020/12/27 Python
HTML5+css3:3D旋转木马效果相册
2017/01/03 HTML / CSS
外贸业务员岗位职责
2013/11/24 职场文书
物业管理毕业生的自我评价
2014/02/17 职场文书
会计岗位职责范本
2015/04/02 职场文书
毕业欢送会致辞
2015/07/29 职场文书
Jupyter Notebook 如何修改字体和大小以及更改字体样式
2021/06/03 Python
Python并发编程实例教程之线程的玩法
2021/06/20 Python
Python 语言实现六大查找算法
2021/06/30 Python
深入浅出的讲解:信号调制到底是如何实现的
2022/02/18 无线电
Python的property属性详细讲解
2022/04/11 Python