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. go语言基础之break和continue的区别

    1.break和continue的区别 在循环里面有两个关键操作break和continue,break操作是跳出当前循环,continue是跳过本次循环. 2.break 备注:break可⽤于fo ...

  2. 当Windows Server 2012的主DC出了问题, 如何迁移其上的FSMO角色?

    步骤如下: 1. 遵循https://support.microsoft.com/kb/255504中的transfer FSMO的步骤. 2. 这样做之后还没完. 因为Windows Server ...

  3. 二十道经典C#面试题

    1.在下面的代码中,如何引用命名空间fabulous中的great? namespace fabulous{// code in fabulous namespace}namespace super{ ...

  4. 利用VS2010开发一个跳转页面aspx

    在开发项目的过程中,由于要集成Cognos的报表通过URL,但是Cognos报表的本身URL长度过程,那么此时就需要开发一个跳转的页面,下面我们就采用VS2010开发一个跳转的页面Default.as ...

  5. 【pyhon】理想论坛单帖爬虫取得信息存入MySql数据库

    代码: # 单帖爬虫,用于爬取理想论坛单个帖子得到发帖人,发帖时间和回帖时间并存入数据库,url例子见main函数 from bs4 import BeautifulSoup import reque ...

  6. （剑指Offer）面试题6：重建二叉树

    题目: 输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树. 假设输入的前序遍历和中序遍历结果中都不含重复的数字. 例如输入前序遍历序列{1,2,4,7,3,5,6,8}和中序遍历序列{4,7, ...

  7. Discuz常见小问题-如何禁止用户发言，快速删除某个用户的所有帖子

    用户-用户组,勾选批量编辑,然后点击批量编辑的链接   点击论坛相关-帖子相关,然后把指定用户组的允许发新话题设置为否,拉到底部,点击提交   以一个普通用户重新登录,尝试发帖报错,说明已经设置成功 ...

  8. 很全的Python 面试题 github

    https://github.com/taizilongxu/interview_python

  9. Ext.encode 与 Ext.decode .

    Ext.encode( Mixed o ) : String: json对象转换json字符串 Ext.decode( String json ) : Object: json字符串转换json对象 ...

  10. Flutter混合工程改造实践

    背景 6月下旬,我们首次尝试用Flutter开发AI拍app.开发的调研准备阶段没有参考业界实践,导致我们踩到一些填不上的坑.在这些坑中,最让我感到棘手的是Flutter和原生页面混合栈管理的问题. ...