vue路由插件之vue-route

前端  /  管理员 发布于 4年前   294

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的实例代码，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧！

您可能感兴趣的文章:

• 使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
• 浅谈vue-router 路由传参的方法
• vue.js vue-router如何实现无效路由(404)的友好提示
• vue-router路由懒加载和权限控制详解
• 使用Vue-Router 2实现路由功能实例详解
• vue-router路由与页面间导航实例解析
• Vue-router路由判断页面未登录跳转到登录页面的实例
• vue-router+vuex addRoutes实现路由动态加载及菜单动态加载