链接(跳转)router-link 和 路由实例Router
- <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
- 当前路由对应的路由对象。
转载于:https://www.cnblogs.com/qq3279338858/p/9415451.html
链接(跳转)router-link 和 路由实例Router相关推荐
- 支持外部链接跳转的 Vue Router 扩展实现
本文内容 问题现状 改进思路 话题延伸 本文小结 众所周知,Vue Router 是 Vue 中重要的插件之一,特别是在当下流行的 单页面应用/SPA 中,这种感觉会越来越明显.此时,路由的作用就是根 ...
- Vue学习笔记(六)--- 前端路由 Vue Router
一.路由 1.概念 路由本质上来说就是一种对应关系,比如说我们在浏览器中输入不同的 url 地址,我们就能访问不同的资源,那么这 url 地址与资源之间的对应关系,就是路由. 2.分类 ① 后端路 ...
- VUE探索第三篇-路由(vue router)
一.vue router介绍 Vue Router是Vue.js官方的路由器,页面间的跳转(比如A->B->C)是一组路由,而Vue Router是管理这些路由的集成器.Vue Route ...
- vue路由跳转权限_vue权限路由实现方式总结
使用全局路由守卫 实现 前端定义好路由,并且在路由上标记相应的权限信息 const routerMap = [ { path: '/permission', component: Layout, re ...
- Angular Router的组件路由介绍
这是SitePoint Angular 2+教程的第4部分,有关如何使用Angular CLI创建CRUD应用程序. 在本文中,我们将介绍Angular Router,并了解当浏览器URL更改时它如何 ...
- angular复用路由组件_Angular Router的组件路由简介
angular复用路由组件 这是SitePoint Angular 2+教程的第4部分,有关如何使用Angular CLI创建CRUD应用程序. 在本文中,我们将介绍Angular Router,并了 ...
- 【Vue路由(router)进一步详解】
Vue路由(router)进一步详解 query属性 具体实例代码如下: params属性 具体实例代码如下: props属性 replace属性 编程式路由导航 路由缓存 具体代码: 总结 本篇文章 ...
- php 添加工信部链接,常见程序(wordpress,dede,discuz)网页下方添加备案号,添加链接跳转到工信部...
应工信部备案要求,现在网站备案要求在网站页面下方添加备案号,并且备案号要求链接跳转到http://www.beian.miit.gov.cn/ 很多站长不知道怎么添加备案号和跳转,导致网站备案被退回, ...
- python用什么软件编程1001python用什么软件编程-Python中免验证跳转到内容页的实例代码...
相信很多人在浏览网页时,经常会碰到需要输入验证码才可以继续浏览的情况吧,遇到这种问题,大多数人只能进行繁琐的注册验证,今天小编教大家只要使用python就可以免验证方法. 以经常用到的解答网站――上学 ...
最新文章
- 从前端框架到前端架构参考资料
- ECLIPSE 添加插件3种方法
- matlab怎么画二维热力图_1.1交通热力图(2)——基于matlab绘制
- php判断是否已关注,php判断用户是否关注微信订阅号或公众号
- 数据挖掘之关联分析六(子图模式)
- java关键字说明_JAVA常用关键字及其用法简要说明
- php sql update 字段a=字段b的信息_企业级PHP求职最全精品面试100问(附答案)
- 5 种编程语言可能注定失败!
- 电大计算机阅读英语作文,(2017年电大)电大英语作文整理20篇.doc
- 小型微型计算机小错误,如何查看IBM小型机系统的错误记录
- C# BitConverterExt 对BitConverter的GetBytes 方法扩展
- java实现微信网页授权登录
- 计算机作用对象失败怎么办,虚拟电脑控制台严重错误—获取VirtualBox COM 对象失败的解决办法...
- Threejs实现模拟河流,水面水流,水管水流,海面
- 马尔可夫预测matlab编程,马尔科夫决策过程的matlab编程实现
- HDFS的常用操作--hdfs下的文件操作常用命令总结
- 2019年伯克利大学 CS294-112《深度强化学习》第1讲:课程介绍和概览(笔记)
- 协同办公OA项目:搭建“自定义”OA办公系统,原来就这么简单!
- mysql白名单ip通配符
- LabVIEW的万金油框架