vue-router学习

转自:https://my.oschina.net/u/1416844/blog/849971

1. vue-router介绍

2. 路由的快速开始

  • 定义各页面容器组件

  • 定义路由配置文件

  • 在入口文件添加路由配置信息

  • 修改跟组件页面信息

  • 接下来可以启动项目查看路由跳转

3. 路由基础知识介绍

3.1. 动态路由

  • 你可以通过:给一个路由添加参数
  • 之后在组件中通过this.$route.params.参数名获取
  • 当路由参数发生变化的时候,组件不会被卸载而是复用,这也意味着组件的生命周期钩子不会再被调用,那么你只能监听$routes实例属性知道路由发生了变化

3.2. 嵌套路由

  • 如果有嵌套路由,要用children属性去配置,路由路径会自动拼接
  • 可以给一个页面初始化一个组件用空路由实现

3.3. 用代码进行路由跳转

  • 在组件中你可以通过this.$router获取路由对象

3.4. 命名路由

  • 有时候,通过一个名称来标识一个路由显得更方便一些,特别是在链接一个路由,或者是执行一些跳转的时候。你可以在创建Router实例的时候,在routes配置中给某个路由设置名称。

3.5. 命名视图

  • 在跳转一个路由的时候可以同时渲染页面中的多个坑

3.6. 重定向和别名

  • 当路由路径太深的时候,你可以给路由起一个别名,那么通过别名和访问太深的路由的页面渲染效果是一样的

3.7. 三种history

4. 进阶知识点

5. 导航钩子

vue-router介绍的更多相关文章

  1. Vue Router路由管理器介绍

    参考博客:https://www.cnblogs.com/avon/p/5943008.html 安装介绍:Vue Router 版本说明 对于 TypeScript 用户来说,vue-router@ ...

  2. 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI

    一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...

  3. 深入浅出的webpack构建工具--webpack4+vue+router项目架构(十四)

    阅读目录 一:vue-router是什么? 二:vue-router的实现原理 三:vue-router使用及代码配置 四:理解vue设置路由导航的两种方法. 五:理解动态路由和命名视图 六:理解嵌套 ...

  4. python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)

    昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...

  5. vue.JS 介绍

    vueJS 介绍 首先,vueJS 是我很早之前就想要接触学习的东西,但是呢,一直没时间,主要是在学校,事太多,没心思定下心来学习,我学生生涯的最后一个假期的第一天晚上,万事开头难,那就先写点儿什么东 ...

  6. vue router的浏览器跳转行为

    最近做的项目中,涉及vue router 路由操作,其操作方法不同,产生的行为亦不同.本文通过对比实验,对其行为进行实验对比及总结,避免混淆. vue router的单页跳转的history模式,类似 ...

  7. vue router使用query和params传参的使用

    传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题.有需要的朋友可以做一下参考,希望可以帮到大家. Vue ...

  8. [Vue 牛刀小试]:第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制

    一.前言 前端路由是什么?如果你之前从事的是后端的工作,或者虽然有接触前端,但是并没有使用到单页面应用的话,这个概念对你来说还是会很陌生的.那么,为什么会在单页面应用中存在这么一个概念,以及,前端路由 ...

  9. (转)vue router 如何使用params query传参,以及有什么区别

    写在前面: 传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题.有需要的朋友可以做一下参考,喜欢的可以点波赞 ...

  10. 每日技术总结:vue router传参方式,js获取设备高度

    今天貌似没什么问题,23333…… 1.vue router 路由传参的方式 应用情景:从分类页(category.vue)进入商品列表页(list.vue),需要传递商品分类id(catId),商品 ...

随机推荐

  1. iOS开源项目:AwesomeMenu

    https://github.com/levey/AwesomeMenu 模仿Path的menu,使用CoreAnimation实现. 1.首先说使用 AwesomeMenuItem *starMen ...

  2. C语言指针加1问题以及字节对齐问题

    今天早上自己写了一段代码,然后测试的时候发现结果总是和预期的不一样,而且偏差的有点离谱,冥思苦想了将近五个小时,最后在我要开始怀疑人生的时候,发现原来是自己犯了一个极其低级但又容易被忽略的问题.好吧, ...

  3. 第十章 springboot + logback

    logback是boot默认的日志首选,个人觉得是最好的日志实现(比log4j好) 下边,在之前的代码基础上增加一个功能,该功能要实现mybatis的and or联查功能,并通过logback日志在控 ...

  4. 使用CadLib实现CAD(dxf、dwg格式)文件的读取和显示 【转】

    参考文章:CadLib 3.5 documentationhttps://www.woutware.com/doc/cadlib3.5/Index.aspx 读取:定义DxfModel类型的变量mod ...

  5. iFrame的妙用

    (作者: Glen,返利网资深工程师,曾在EA等公司任职) 最近工作有个在项目-布兜收藏夹.简言之就是将喜欢的图片收藏到布兜页面上来,这其中用到了很多关于iframe的方面,总结如下: 1. 作为弹出 ...

  6. 从AIDL开始谈Android进程间Binder通信机制

    转自: http://tech.cnnetsec.com/585.html 本文首先概述了Android的进程间通信的Binder机制,然后结合一个AIDL的例子,对Binder机制进行了解析. 概述 ...

  7. 用Sass创建MetaFizzy效果

    来源:GBin1.com Hugo发现了一个绚丽的css效果应用于web中并教会你如何聪明的重建和使用它.两天前,我看见笔者Hugo在css帮助下重写MetaFizzy的效果,Hugo帮助我们找到了一 ...

  8. unity3d GameCenter的使用

    原地址:http://blog.sina.com.cn/s/blog_6b3661a901013zmh.html 因为开发的游戏需要支持GameCenter,老大把这活交给我来搞,于是俺就百度Goog ...

  9. Java之JVM调优案例分析与实战(4) - 外部命令导致系统缓慢

    环境:这是一个来自网络的案例:一个数字校园应用系统,运行在一台4个CPU的Solaris 10操作系统上,中间件为ClassFish服务器.系统在进行大并发压力测试的时候,发现请求响应时间比较慢,通过 ...

  10. 一致Hash算法

    一致性哈希算法是分布式系统中经常使用的算法.比方,一个分布式的存储系统,要将数据存储到详细的节点上.假设採用普通的hash方法.将数据映射到详细的节点上,如key%N.key是数据的key.N是机器节 ...