• <router-link>和<router-link>传入的对象参数中包含path路径、name命名路由、params路径参数、query ?查询,并且如果提供了 path,params 会被忽略

<router-link>

  • <router-link> 比起写死的 <a href="..."> 会好一些

    • 无论是 HTML5 history 模式还是 hash 模式,它的表现行为一致,所以,当你要切换路由模式,或者在 IE9 降级使用 hash 模式,无须作任何变动。
    • 在 HTML5 history 模式下,router-link 会守卫点击事件,让浏览器不再重新加载页面。(<a href='...'>会导致页面重新加载)
    • 当你在 HTML5 history 模式下使用 base 选项之后,所有的 to 属性都不需要写 (基路径) 了。(base是初始化时传入的基路径配置)
    • 虽然表现下它默认渲染为<a>标签,但是本质上是通过click事件执行JS语句跳转。
  • 当 <router-link> 对应的路由匹配成功,将自动设置 class 属性值 .router-link-active(部分匹配)和.router-link-exact-active(完全匹配),可以通过初始化传参修改class属性值

  • 将激活 class 应用在外层元素。在这种情况下,<a> 将作为真实的链接 (它会获得正确的 href 的),而 "激活时的CSS类名" 则设置到外层的 <li>

<router-link tag="li" to="/foo">
<a>/foo</a>
</router-link>

to表示目标路由的链接

  • 当被点击后,内部会立刻把 to 的值传到 router.push(),所以这个值可以是一个字符串或者是描述目标位置的对象。点击 <router-link :to="..."> 等同于调用 router.push(...)
  • 字符串如果没有/开头,默认从根目录开始。提供append属性可以从当前目录开始
<!-- 字符串 -->
<router-link to="home">Home</router-link>
<!-- 渲染结果 -->
<a href="home">Home</a> 和 <a href="/home">Home</a>一样效果 <router-link :to="{ path: 'home' }">Home</router-link> // (如果提供了 path,params 会被忽略) <!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link> <!-- 带查询参数,下面的结果为 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

replace替换路由

  • replace当点击时,会调用 router.replace() 而不是 router.push(),于是导航后不会留下 history 记录。
<router-link :to="{ path: '/abc'}" replace></router-link>

append相对路由

  • 设置 append 属性后,则在当前 (相对) 路径前添加基路径。例如,我们从 /a 导航到一个相对路径 b,如果没有配置 append,则路径为 /b,如果配了,则为 /a/b
<router-link :to="{ path: 'relative/path'}" append></router-link>

tag渲染标签

  • 有时候想要 <router-link> 渲染成某种标签,例如 <li>。 于是我们使用 tag prop 类指定何种标签,同样它还是会监听点击,触发导航。
<router-link to="/foo" tag="li">foo</router-link>
<!-- 渲染结果 -->
<li>foo</li>

active-class前匹配激活class

  • 设置 链接激活时使用的 CSS 类名(部分匹配class名)。默认值可以通过路由的构造选项 linkActiveClass 来全局配置。默认值: "router-link-active"

exact完全匹配

  • 路由默认会为当级及所有匹配的父级添加激活时的CSS类名(部分匹配),可以添加这个特性来限制当前路由只能在完全匹配时添加class(部分匹配class值)。
<router-link to="/">/</router-link>    // 1
<router-link to="/" exact>/ (exact match)</router-link> // 2 <router-link to="/users">/users</router-link> // 当前路由被激活时,1会被添加class,但是2不会

event导航触发事件

  • 声明可以用来触发导航的事件。可以是一个字符串或是一个包含字符串的数组。默认值: 'click'

exact-active-class完全匹配激活class

  • 配置当链接被精确匹配的时候应该激活的 class。默认值可以通过路由构造函数选项 linkExactActiveClass 进行全局配置的。默认值: "router-link-exact-active"

------------------------------------------------------------------------------------------------------------------

Router 实例方法

  • Vue Router 的导航方法 (push、 replace、 go) 在各类路由模式 (history、 hash 和 abstract) 下表现一致
  • 通过 this.$router 访问路由器
// Home.vue
export default {
computed: {
username () {
// 我们很快就会看到 `params` 是什么
return this.$route.params.username
}
},
methods: {
goBack () {
window.history.length > 1
? this.$router.go(-1)
: this.$router.push('/')
}
}
}

router.push

  • 想要导航到不同的 URL,则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的 URL。
  • router.push该方法的参数可以是一个字符串路径,或者一个描述地址的对象
// 同样的规则也适用于 router-link 组件的 to 属性
router.push('home') // 对象
router.push({ path: 'home' }) // (如果提供了 path,params 会被忽略) // 命名的路由
router.push({ name: 'user', params: { userId: 123 }})
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link> // 带查询参数,变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
  • 在 2.2.0+,可选的在 router.push 或 router.replace 中提供 onComplete 和 onAbort 回调作为第二个和第三个参数。这些回调将会在导航成功完成 (在所有的异步钩子被解析之后) 或终止 (导航到相同的路由或在当前导航完成之前导航到另一个不同的路由) 的时候进行相应的调用。

router.replace

  • router.replace(location, onComplete?, onAbort?)它不会向 history 添加新记录。它的声明式<router-link :to="..." replace>
  • 在 2.2.0+,可选的在 router.push 或 router.replace 中提供 onComplete 和 onAbort 回调作为第二个和第三个参数。这些回调将会在导航成功完成 (在所有的异步钩子被解析之后) 或终止 (导航到相同的路由或在当前导航完成之前导航到另一个不同的路由) 的时候进行相应的调用。

router.go

router.go(n)

router.back

router.forward 向前

router.getMatchedComponents

  • 返回目标位置或是当前路由匹配的组件数组 (是数组的定义/构造类,不是实例?)。通常在服务端渲染的数据预加载时时候。
router.getMatchedComponents(location?)

router.resolve ?

  • 解析目标位置 (格式和 <router-link> 的 to prop 一样)

    • current 是当前默认的路由 (通常你不需要改变它)
    • append 允许你在 current 路由上附加路径 (如同 router-link)
const resolved: {
location: Location;
route: Route;
href: string;
} = router.resolve(location, current?, append?)

router.addRoutes

  • 动态添加更多的路由规则。参数必须是一个符合 routes 选项要求的数组。
router.addRoutes(routes: Array<RouteConfig>)

router.onReady

  • 该方法把一个回调排队,在路由完成初始导航时调用,这意味着它可以解析所有的异步进入钩子(守卫)和路由初始化相关联的异步组件。
  • 这可以有效确保服务端渲染时服务端和客户端输出的一致。
  • 第二个参数 errorCallback 只在 2.4+ 支持。它会在初始化路由解析运行出错 (比如解析一个异步组件失败) 时被调用。

router.onError

  • 注册一个回调,该回调会在路由导航过程中出错时被调用。注意被调用的错误必须是下列情形中的一种:

    • 错误在一个路由守卫函数中被同步抛出;
    • 错误在一个路由守卫函数中通过调用 next(err) 的方式异步捕获并处理;
    • 渲染一个路由的过程中,需要尝试解析一个异步组件时发生错误。

------------------------------------------------------------------------------------------------------------------

Router 实例属性

router.match

  • 返回路由对象,参数为必须
router.match(location)

router.app

  • 配置了 router 的 Vue 根实例

router.mode

  • 路由使用的模式。

router.currentRoute

  • 当前路由对应的路由对象。

链接(跳转)<router-link> 和 路由实例Router的更多相关文章

  1. Router和History (路由控制)-backbone

    Router和History (路由控制) Backbone.Router担任了一部分Controller(控制器)的工作,它一般运行在单页应用中,能将特定的URL或锚点规则绑定到一个指定的方法(后文 ...

  2. Vue.js 2.x笔记:路由Vue Router(6)

    1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Rout ...

  3. Vue.js—组件快速入门及Vue路由实例应用

    上次我们学习了Vue.js的基础,并且通过综合的小实例进一步的熟悉了Vue.js的基础应用.今天我们就继续讲讲Vue.js的组件,更加深入的了解Vue,js的使用.首先我们先了解一下什么是Vue.js ...

  4. 【共享单车】—— React后台管理系统开发手记:Router 4.0路由实战演练

    前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...

  5. vue生成路由实例

    一.vue路由https://router.vuejs.org/zh-cn/1.bower下载vue-routervue的里的链接 <router-link to="/home&quo ...

  6. vue.js利用vue.router创建前端路由

    node.js方式: 利用node.js安装vue-router模块 cnpm install vue-router 安装完成后我们引入这个模板! 下载vue-router利用script引入方式: ...

  7. 【react router路由】<Router> <Siwtch> <Route>标签

    博客 https://www.jianshu.com/p/ed5e56994f13?from=timeline 文档 http://react-guide.github.io/react-router ...

  8. 链接测试工具xenu link sleuth的使用

    链接测试工具xenu link sleuth的使用很简单. 可以从这里下载 http://home.snafu.de/tilman/xenulink.html 但是注意到: 如果需要登录才能进入所有的 ...

  9. vue生成路由实例, 使用单个vue文件模板生成路由

    一.vue-loader与vue-router配合 $ cnpm install vue-router --save 二.生成vue-webpack模板 $ vue init webpack-simp ...

随机推荐

  1. git 日常

    git 恢复到上一个版本比如执行 git commit 命令之后 做了一些修改 恢复到上一个版本 1.修改一个文件想回到修改前 直接 git checkout -- filename 2.修改过文件, ...

  2. 记录一次OOM分析过程

    工具: jstat jmap jhat 1.jstat查看gc情况 S0C.S1C.S0U.S1U:Survivor 0/1区容量(Capacity)和使用量(Used) EC.EU:Eden区容量和 ...

  3. C#、AE开发入门之打开CAD文件并显示

    加载CAD文件稍显复杂一些,总体还是和前面基本类似 private void button3_Click(object sender, EventArgs e) { axMapControl1.Cle ...

  4. PAT 乙级 1049 数列的片段和(20) C++版

    1049. 数列的片段和(20) 时间限制 200 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CAO, Peng 给定一个正数数列,我们可以从中截 ...

  5. [转][layui]table 的一个BUG

    转换静态表格,一直只能显示 10 行,研究发现解决方法有两个:1.参数里: limit: 30, 添加参数以确保显示更多行2.修改 table.js 里面的 F.prototype.config ,添 ...

  6. 由于代码已经过优化或者本机框架位于调用堆栈之上,无法计算表达式的值。System.Threading.ThreadAbortException

    第一次遇到这样的错误 错误语法 try{ Response.Redirect("aa.aspx"); }catch (Exception ex){ Response.Redirec ...

  7. Mysql 5.7 系列命令 timestamp类型的字段不能设默认值为“0000-00-00 00:00:00” 要设为`update_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新',

    一.show相关命令语句 1.查看表的索引 show index from tbl_name; 1 table:表名 non_unique:索引是非唯一的?.0否,唯一是索引的.1是,是非唯一索引.( ...

  8. Abp IRepository 方法解释(1)

    //    // 摘要:    //     This interface is implemented by all repositories to ensure implementation of ...

  9. Unicode String to a UTF-8 TypedArray Buffer in JavaScript

    https://coolaj86.com/articles/unicode-string-to-a-utf-8-typed-array-buffer-in-javascript/

  10. CRM 2016 一个IFrame页面,执行另一IFrame页面的函数

    如果IFrame_A  想执行 IFrame_B 中 RefreshSelf() 函数,可以按以下方法写: 此js代码写在 IFrame_A 中 parent.Xrm.Page.getControl( ...