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 相关文章推荐
JSQL 基于客户端的成绩统计实现方法
May 05 Javascript
JS日期和时间选择控件升级版(自写)
Aug 02 Javascript
javascript中String对象的slice()方法分析
Dec 20 Javascript
JavaScript Window浏览器对象模型方法与属性汇总
Apr 20 Javascript
详解参数传递四种形式
Jul 21 Javascript
jQuery简单获取DIV和A标签元素位置的方法
Feb 07 Javascript
Angular中ng-options下拉数据默认值的设定方法
Jun 21 Javascript
React BootStrap用户体验框架快速上手
Mar 06 Javascript
vuejs 切换导航条高亮(路由菜单高亮)的方法示例
May 29 Javascript
详解使用webpack+electron+reactJs开发windows桌面应用
Feb 01 Javascript
webpack常用构建优化策略小结
Nov 21 Javascript
判断JavaScript中的两个变量是否相等的操作符
Dec 21 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日历程序
2006/12/06 PHP
PHP中的命名空间相关概念浅析
2015/01/22 PHP
Laravel4中的Validator验证扩展用法详解
2016/07/26 PHP
PHP实现的日历功能示例
2018/09/01 PHP
解决laravel上传图片之后,目录有图片,但是访问不到(404)的问题
2019/10/14 PHP
兼容IE和FF的图片上传前预览js代码
2013/05/28 Javascript
Javascript中的getUTCDay()方法使用详解
2015/06/10 Javascript
AngularJS中实现用户访问的身份认证和表单验证功能
2016/04/21 Javascript
jquery插件uploadify多图上传功能实现代码
2016/08/12 Javascript
bootstrap fileinput完整实例分享
2016/11/08 Javascript
JS控制TreeView的结点选择
2016/11/11 Javascript
利用jquery获取select下拉框的值
2016/11/23 Javascript
谈谈第三方App接入微信登录 解读
2016/12/27 Javascript
ionic2 tabs 图标自定义实例
2017/03/08 Javascript
jquery实现图片上传前本地预览
2017/04/28 jQuery
AngularJS实现的简单拖拽功能示例
2018/01/02 Javascript
Vue.js实现图片的随意拖动方法
2018/03/08 Javascript
在vue中使用css modules替代scroped的方法
2018/03/10 Javascript
vue任意关系组件通信与跨组件监听状态vue-communication
2020/10/18 Javascript
跟老齐学Python之用Python计算
2014/09/12 Python
Python3 实现随机生成一组不重复数并按行写入文件
2018/04/09 Python
利用Python写一个爬妹子的爬虫
2018/06/08 Python
Python多进程原理与用法分析
2018/08/21 Python
深入解析python中的实例方法、类方法和静态方法
2019/03/11 Python
Python利用lxml模块爬取豆瓣读书排行榜的方法与分析
2019/04/15 Python
Python绘图Matplotlib之坐标轴及刻度总结
2019/06/28 Python
Windows下pycharm创建Django 项目(虚拟环境)过程解析
2019/09/16 Python
css3 给页面加个半圆形导航条主要利用旋转和倾斜样式
2014/02/10 HTML / CSS
C#和SQL Server的面试题
2016/08/12 面试题
项目计划书范文
2014/01/09 职场文书
农业局学习党的群众路线教育实践活动心得体会
2014/03/07 职场文书
刊首寄语大全
2014/04/11 职场文书
工厂仓管员岗位职责范本
2014/07/17 职场文书
2014年中班下学期工作总结
2014/12/11 职场文书
2015年乡镇发展党员工作总结
2015/03/31 职场文书
2015年秋季小学开学标语
2015/07/16 职场文书