vue中如何使用vue-route路由插件

本篇文章给大家分享的是有关vue中如何使用vue-route路由插件，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

创新互联是一家专业提供八宿企业网站建设,专注与网站建设、做网站、HTML5、小程序制作等业务。10年已为八宿众多企业、政府机构等服务。创新互联专业网站制作公司优惠进行中。

　　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路由插件，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。