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 相关文章推荐
jquery.AutoComplete.js中文修正版(支持firefox)
Apr 09 Javascript
jquery在Chrome下获取图片的长宽问题解决
Mar 20 Javascript
checkbox全选所涉及到的知识点介绍
Dec 31 Javascript
js预加载图片方法汇总
Jun 15 Javascript
非常实用的12个jquery代码片段
Nov 02 Javascript
JavaScript闭包的简单应用
Sep 01 Javascript
React教程之Props验证的具体用法(Props Validation)
Sep 04 Javascript
详解vue mint-ui源码解析之loadmore组件
Oct 11 Javascript
vue 实现剪裁图片并上传服务器功能
Mar 01 Javascript
vue项目中axios请求网络接口封装的示例代码
Dec 18 Javascript
基于Angular 8和Bootstrap 4实现动态主题切换的示例代码
Feb 11 Javascript
vue的项目如何打包上线
Apr 13 Vue.js
在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
SSI指令
2006/11/25 PHP
人尽可用的Windows技巧小贴士之下篇
2007/03/22 PHP
取得单条网站评论以数组形式进行输出
2014/07/28 PHP
php运行时动态创建函数的方法
2015/03/16 PHP
利用PHP将图片转换成base64编码的实现方法
2016/09/13 PHP
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
使用Modello编写JavaScript类
2006/12/22 Javascript
JS实现模仿微博发布效果实例代码
2013/12/16 Javascript
使用Node.js实现HTTP 206内容分片的教程
2015/06/23 Javascript
javascript页面倒计时实例
2015/07/25 Javascript
不想让浏览器运行javascript脚本的方法
2015/11/20 Javascript
使用Bootstrap框架制作查询页面的界面实例代码
2016/05/27 Javascript
JavaScript中的编码和解码函数
2017/02/15 Javascript
Vue的实例、生命周期与Vue脚手架(vue-cli)实例详解
2017/12/27 Javascript
微信小程序自定义组件之可清除的input组件
2018/07/17 Javascript
bootstrap实现点击删除按钮弹出确认框的实例代码
2018/08/16 Javascript
快速解决vue在ios端下点击响应延时的问题
2018/08/27 Javascript
刷新页面后让控制台的js代码继续执行
2019/09/20 Javascript
如何通过JS实现转码与解码
2020/02/21 Javascript
[01:00:59]VP VS VG Supermajor小组赛胜者组第二轮 BO3第二场 6.2
2018/06/03 DOTA
python3生成随机数实例
2014/10/20 Python
python3写爬取B站视频弹幕功能
2017/12/22 Python
Python使用cx_Freeze库生成msi格式安装文件的方法
2018/07/10 Python
Django 路由系统URLconf的使用
2018/10/11 Python
Python叠加两幅栅格图像的实现方法
2019/07/05 Python
使用Python函数进行模块化的实现
2019/11/15 Python
python dataframe NaN处理方式
2019/12/26 Python
重写django的model下的objects模型管理器方式
2020/05/15 Python
python爬虫实现爬取同一个网站的多页数据的实例讲解
2021/01/18 Python
Canvas绘制浮动球效果的示例
2017/12/29 HTML / CSS
Omio西班牙:全欧洲低价大巴、火车和航班搜索和比价
2017/02/11 全球购物
网上常见的一份Linux面试题(多项选择部分)
2014/09/09 面试题
党员2014两会学习心得体会
2014/03/17 职场文书
数学复习课教学反思
2016/02/18 职场文书
创业计划书之服装
2019/10/07 职场文书
原生JS封装vue Tab切换效果
2021/04/28 Vue.js