GoodBoy and GoodGirl~进来了就看完点个赞再离开，写了这么多也不容易的~

一、介绍

　　 1.概念：路由其实就是指向的意思，当我们点击home按钮时，页面中就要显示home的内容，点击login按钮时，页面就显示login的内容，也可以说是一种映射，所有在页面上有两个部分，一个是点击部分，一个是显示部分。
     2.路由中有三个基本的概念，route,routes,router。
          1.route:它是一个路由，是一个单数，点击Home按钮->Home内容
          2.routes:它是一组路由，把每一条路由组合起来，串接起来形成一个数组；[{home按钮=>home内容}，{about按钮=>about内容}]
          3.router:它是一个机制，相当于一个管理者，来管理所有路由；
          4.客户端中的路由原理:实际上就是dom 元素的显示和隐藏。当页面中显示home 内容的时候，about 中的内容全部隐藏，反之也是一样。客户端路由有两种实现方式：基于hash 和基于html5 history api. 

二、Vue路由绑定

1.最常用的路由绑定方式

    <router-link to="/admin" class="nav-link">管理</router-link>

2.对路由name进行绑定

    {path:'/about',name:'aboutlink',redirect:'/about/contact',component:About}

    <router-link :to="{name:'aboutlink'}" class="nav-link">关于我们</router-link>

3.对数据进行绑定

    data(){

        return{

            menu:'/menu',

        }

    }

    <router-link :to="menu" class="nav-link">菜单</router-link>

三、Vue路由跳转

.跳到上一次浏览页面

    this.$router.go(-)

.跳到指定位置

    this.$router.replace('/name')

.跳到指定路由名字下

    this.$router.replace({name:'aboutlink'})

.

    this.$router.push('/name')

    this.$router.push({name:'aboutlink'})

//{name:'aboutlink'}是路由配置是的name名称

四、路由重定向与错误时跳转

.路由重定向

    redirect:'/home'

.错误路径时跳转

    {path:'*',redirect:'/'}

五、路由守卫

Vue的路由守卫分为三种：

    .全局守卫

        router.beforeEach((to,from,next)=>{})  //前置守卫

        router.afterEach((to,from)=>{})

    .组件内守卫

        beforeRouterEnter:(to,from,next)=>{}

        beforeRouterLeave:(to,from,next)=>{}

    .路由独享守卫

        beforeEnter:(to,from,next)=>{}

    具体怎么使用的就不一一介绍了，也是很简单的.

　　

Vue路由学习心得的更多相关文章

  1. Vue路由学习笔记

    Vue路由大致分为6个步骤: 1.引用vue-router <script src="js/vue-router.js"></script> 2.安装插件 ...

  2. vue学习心得

    前言 使用vue框架有一段时间了,这里总结一下心得,主要为新人提供学习vue一些经验方法和项目中一些解决思路. 文中谨代表个人观点,如有错误,欢迎指正. 环境搭建 假设你已经通读vue官方文档(文档都 ...

  3. Vue学习心得----新手如何学习Vue（转载）

    ps:本文并非原著,转载自:https://www.cnblogs.com/buzhiqianduan/p/7620102.html,请悉知 前言 使用vue框架有一段时间了,这里总结一下心得,主要为 ...

  4. Java开发学习心得（二）：Mybatis和Url路由

    目录 Java开发学习心得(二):Mybatis和Url路由 1.3 Mybatis 2 URL路由 2.1 @RequestMapping 2.2 @PathVariable 2.3 不同的请求类型 ...

  5. PWA学习心得

    PWA学习心得 一.什么是PWA Progressive  Web  App , (渐进式增强 WEB 应用) 简称 PWA ,是提升WebApp的体验的一种新方法,能给用户原生应用的体验. PWA ...

  6. vue api学习之nextTick的理解

    对于 Vue.nextTick 方法,之前没有听说过,突然听到别人提起,貌似作用挺大.以下为学习心得.官方文档上这样定义:在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法, ...

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

    路由是连接各个页面的桥梁,而参数在其中扮演者异常重要的角色,在一定意义上,决定着两座桥梁是否能够连接成功. 在vue路由中,支持3中传参方式. 场景,点击父组件的li元素跳转到子组件中,并携带参数,便 ...

  8. 初印象至Vue路由

    初印象系列为快速了解一门技术的内容,后续会推出本人应用这门技术时发现的一些认识. Vue路由和传统路由的区别: Vue路由主要是用来实现单页面应用内各个组件之间的切换,同样支持传递参数等功能.而传统路 ...

  9. Vue 路由详解

    Vue 路由详解 对于前端来说,其实浏览器配合超级连接就很好的实现了路由功能.但是对于单页面应用来说,浏览器和超级连接的跳转方式已经不能适用,所以各大框架纷纷给出了单页面应用的解决路由跳转的方案. V ...

随机推荐

  1. Android高级控件（一）——ListView绑定CheckBox实现全选，增加和删除等功能

    Android高级控件(一)--ListView绑定CheckBox实现全选,增加和删除等功能 这个控件还是挺复杂的,也是项目中应该算是比较常用的了,所以写了一个小Demo来讲讲,主要是自定义adap ...

  2. 飞思卡尔IMX6处理器的GPIO配置方式

    在linux或android系统中,假如我们要配置飞思卡尔IMX6处理器的GPIO管脚,比如是GPIO_19这个管脚,那么要像这样: [cpp] view plaincopy #define  MX6 ...

  3. 一个清除Xcode项目占用大量空间的脚本

    如果将Xcode项目的Derived Data保留在每个项目的相对路径里的话,久而久之该文件夹里会占用大量的空间,多达百兆计算. 其中DerivedData中很多文件是Xcode项目编译和执行的缓存, ...

  4. wince6.0 编译报错:"error C2220: warning treated as error - no 'object' file generated"的解决办法

    内容提要:wince6.0编译报错:"error C2220: warning treated as error - no 'object' file generated" 原因是 ...

  5. Android Hal层简要分析

    Android Hal层简要分析 Android Hal层(即 Hardware Abstraction Layer)是Google开发的Android系统里上层应用对底层硬件操作屏蔽的一个软件层次, ...

  6. 拆解轮子之XRecyclerView

    简介 这个轮子是对RecyclerView的封装,主要完成了下拉刷新.上拉加载更多.RecyclerView头部.在我的Material Design学习项目中使用到了项目地址,感觉还不错.趁着毕业答 ...

  7. 线程ava.lang.OutOfMemoryError: unable to create new native thread

    近日开发遇到多线程的问题: java.lang.OutOfMemoryError: unable to create new native thread Exception in thread &qu ...

  8. XSS攻击过滤处理

    关于XSS攻击 XSS是一种经常出现在web应用中的计算机安全漏洞,它允许恶意web用户将代码植入到提供给其它用户使用的页面中. XSS漏洞的危害 网络钓鱼,包括盗取各类用户账号: 窃取用户cooki ...

  9. $cordovaCamera 插件 上传头像 图片功能

    首先要注入  $cordovaCamera 使用相机拍照 var useCamera = function() { var options = { //这些参数可能要配合着使用,比如选择了source ...

  10. 基于JDK动态代理和CGLIB动态代理的实现Spring注解管理事务（@Trasactional）到底有什么区别。

    基于JDK动态代理和CGLIB动态代理的实现Spring注解管理事务(@Trasactional)到底有什么区别. 我还是喜欢基于Schema风格的Spring事务管理,但也有很多人在用基于@Tras ...