vue路由插件之vue-route

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

赞 (0)

相关推荐

  • vue-router路由与页面间导航实例解析

    vue-router路由与页面间导航实例解析

    vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的页面应用,是用一些超链接来实现页面切换和跳转的.在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换. vue-router 我们知道路由定义了一系列访问的地址规则,路由引擎根据这些规则匹配找到对应的处理页面,然后将请求转发给页进行处理.可以说所有的后端开发都是这样做的,而前端路由是不

  • 使用Vue-Router 2实现路由功能实例详解

    vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的页面应用,是用一些超链接来实现页面切换和跳转的.在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换. 注意:vue-router 2只适用于Vue2.x版本,下面我们是基于vue2.0讲的如何使用vue-router 2实现路由功能. 推荐使用npm安装. npm install v

  • vue.js vue-router如何实现无效路由(404)的友好提示

    前言 大家都知道对于单页应用,官方提供了vue-router进行路由跳转的处理,而最近在做一个基于vue-router的SPA,想对无效路由(404)页面做下统一处理. 这次我真的没有在官方文档找到具体的说明[捂脸] 所以本文仅是我DIY的一个思路,求轻虐=_= 在我的理解中,vue-router是根据path去匹配注册的route,匹配到则加载对应的组件,匹配不到则重置(或者说清空)对应的router-view. 所以,我们不做处理的话,最终页面展示的是一片空白. 那么,我们是不是可以在路由匹

  • vue-router路由懒加载和权限控制详解

    vue-router路由懒加载 和权限控制,今天刚好搞了一个基于node token验证的小demo 所以下面介绍下,路由懒加载 1.为什么要使用路由懒加载呢 用vue.js写单页面应用时,会出现打包后的JavaScript包非常大,影响页面加载,我们可以利用路由的懒加载去优化这个问题,当我们用到某个路由后,才去加载对应的组件,这样就会更加高效 2.用法 import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) e

  • 使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能

    路由跳转前做一些验证,比如登录验证(未登录去登录页),是网站中的普遍需求.对此,vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫(navigation-guards). 导航守卫(navigation-guards)这个名字,听起来怪怪的,但既然官方文档是这样翻译的,就姑且这么叫吧. 贴上文档地址:https://router.vuejs.org/zh-cn/advanced/navigation-guards.html 先来摘抄一段文档中beforeRou

  • 浅谈vue-router 路由传参的方法

    路由传参数.在很多时候我们需要路由上面传递参数,比如新闻列表页,我们需要传递新闻ID,给新闻详细页. 1.新闻列表页模板 <template id="news"> <div> <h2>新闻列表</h2> <ul> <li> <router-link to="/news/001">新闻001</router-link> </li> <li> <

  • vue-router+vuex addRoutes实现路由动态加载及菜单动态加载

    此案例主要实现了一个功能是,在vue实例首次运行时,在加载了login和404两个路由规则,登录成功后,根据登录用户角色权限获取该角色相应菜单权限,生成新的路由规则添加进去. 做过后台管理系统都一定做过这个功能,在对菜单权限进行粗粒度权限控制的时候,通过角色获取菜单后,异步生成菜单,所以一开始拿到需求的时候,我也以为这和平常的没什么不同,不过做起来就发现了很多问题, 1.vue-router的实例,在new vue实例的时候,就加载了,且必须加载,这个时候,登录路由一定要加载,可是这个时候没有登

  • Vue-router路由判断页面未登录跳转到登录页面的实例

    如下所示: router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.requireAuth)){ // 判断该路由是否需要登录权限 if (token) { // 判断当前的token是否存在 next(); } else { next({ path: '/login', query: {redirect: to.fullPath} // 将跳转的路由path作为参数,登录成功后跳转到该

  • vue路由插件之vue-route

    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

  • Vue路由对象属性 .meta $route.matched详解

    $route.fullPath 1 路由是:/path/:type真正路径是:/path/list 2 path匹配路径: /path/list 3 fullPath匹配路由: /path/:type 路由元信息 .meta const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, children: [ { path: 'bar', component: Bar, // a meta field meta:

  • 使用 webpack 插件自动生成 vue 路由文件的方法

    一款自动生成 vue 路由文件的 webpack 插件 vue-route-webpack-plugin在项目中试点成功了,现在在项目中已经不需要再维护路由配置文件了,由插件自动生成,节省了大家维护路由的时间. 从长远来看,使用插件自动生成路由是具有一定好处的.当项目中的路由配置非常多的时候,为了区分业务,你可能需要分成许多个文件来存放这些路由文件,这样就不得不去维护这些路由文件. 比如这样的路由文件结构: |-src/ |-router/ index.js childrenRouter.js

  • Vue路由this.route.push跳转页面不刷新的解决方案

    Vue路由this.route.push跳转页面不刷新的解决方案

    Vue路由this.route.push跳转页面不刷新 一.背景 介绍:在vue项目开发中,使用路由进行页面跳转时,路由所跳转的页面不进行刷新. 也就是vue生命周期函数没有执行(created.mounted钩子函数). 案例: A页面: B页面: 问题: 当在A页面第一点击按钮到B页面时,一切正常,当返回到A页面再次点击按钮时,B页面没有执行mounted钩子函数,结果导致mounted函数中查询方法不执行. 二.解决方法: 1.使用activated:{}周期函数代替mounted:{}函

  • 深入理解vue路由的使用

    深入理解vue路由的使用

    vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的页面应用,是用一些超链接来实现页面切换和跳转的.在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换. 本文将以示例的形式来介绍vue-router的各个特性,一共包含6个示例,每个示例都有乞丐版,前5个示例有皇帝版. 乞丐版是将所有代码混杂在一起的HTML页面,皇帝版是基于vue-w

  • Vue路由router详解

    Vue路由router详解

    目录 模块化的方式使用路由插件 使用路由 声明式导航 编程式导航 动态路由匹配 通配符匹配路径 查询参数query 响应路由参数的变化 命名路由,路由别名,重定向 嵌套路由 命名视图 导航守卫 (1)全局守卫 (2)路由独享守卫 (3)组件内守卫 导航解析的流程 总结 模块化的方式使用路由插件 (1)安装 npm install vue-router (2)构建文件目录 在src目录下创建一个router文件夹,然后创建一个index.js (3)这里我们通过模块化的方式进行创建路由,方便代码的

  • Vue路由参数的传递与获取方式详细介绍

    Vue路由参数的传递与获取方式详细介绍

    目录 前言 1. 通过动态路由参数传递 2. 通过query字符串传递 3. props 隐式传递 前言 vue 页面路由切换时传参的方式有如下几种: 动态路由参数 它隐藏字段信息,相对于来说较安全,同时地址栏中的地址也相对较短 它必须是先定义后使用,一般用于根据固定参数,返回对应的数据所用 query字符串 ?id=1 通过search字符串的方式来在地址栏中传递数据,相对于来说地址栏会暴露字段信息安全性较低,一般用于搜索相关,它可以不定义就可以直接用 props 隐式传递 隐式传递,它一般用

  • Vue路由重复点击报错问题及解决

    目录 vue路由重复点击时会出现报错 局部处理 全局处理 vue 重复点击菜单,路由重复报错解决 报错原因 解决方法 总结 vue路由重复点击时会出现报错 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location:XXX 虽然不影响运行结果,但最好还是处理一下. 局部处理 局部处理是指对单个路由进行处理,其他的路由依旧报错. 在路由跳转的push语句中添加catch捕捉

  • 3种vue路由传参的基本模式

    路由是连接各个页面的桥梁,而参数在其中扮演者异常重要的角色,在一定意义上,决定着两座桥梁是否能够连接成功. 在vue路由中,支持3中传参方式. 场景,点击父组件的li元素跳转到子组件中,并携带参数,便于子组件获取对应li的数据,显示相应的正确的内容. 父组件中: <li v-for="article in articles" @click="getDescribe(article.id)"> 方案一: getDescribe(id) { // 直接调用$

  • 解决vue 路由变化页面数据不刷新的问题

    每天记录一点点,把我遇到的问题记录下来, 希望可以帮助到更多和我遇到同样问题的人. 问题描述:通过调接口,动态显示帮助页面的问题列表, 问题列表有多级,当点击的这个问题没有下一级问题的时候跳入内容页. 问题出在,我在电脑上做移动端页面的时候,相继跳到详情页,我想返回,点击 按钮,直接跳转到了如上第一张图的样子,no,no,no,这不是我想要的结果,此刻,想到了通过改变url来改变页面的层级问题. 一级的parent为0,默认不显示或显示. 二级的parent为1,点击一级路由变为如图: 点击进入

随机推荐