<router-link> 组件支持用户在具有路由功能的应用中 (点击) 导航。 通过 to 属性指定目标地址,默认渲染成带有正确链接的 <a> 标签,可以通过配置 tag 属性生成别的标签.。另外,当目标路由成功激活时,链接元素自动设置一个表示激活的 CSS 类名router-link-active。

编程式导航:

path

name+params

path+query

如果用path+params,后面的params不会生效

命名多个视图:

router.beforeEach全局前置守卫

router.beforeResolve全局解析守卫

router.afterEach全局后置钩子

beforeEnter路由独享守卫

组件内的守卫:beforeRouterEnter(不能访问this,守卫在导航确认前被调用,因此即将登场的新组件还没被创建。不过,你可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调,并且把组件实例作为回调方法的参数。)、beforeRouterUpdate、beforeRouterLeave(这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消。)

router-link的更多相关文章

  1. [Redux] Navigating with React Router <Link>

    We will learn how to change the address bar using a component from React Router. In Root.js: We need ...

  2. Vue router link

    html: <router-link to="test">Go to Foo</router-link> <router-link to=" ...

  3. [React] React Router: Router, Route, and Link

    In this lesson we'll take our first look at the most common components available to us in react-rout ...

  4. angular2 学习笔记 ( Router 路由 )

    参考 : https://angular.cn/docs/ts/latest/guide/router.html#!#can-activate-guard https://angular.cn/doc ...

  5. [React] React Router: Redirect

    The Redirect component in react-router does exactly what it sounds like. It allows us to redirect fr ...

  6. [React] React Router: Querystring Parameters

    Define query param in Link, accept path and query : const Links = () => <nav > <Link to= ...

  7. [React] React Router: Named Components

    In this lesson we'll learn how to render multiple component children from a single route. Define a n ...

  8. [React] React Router: Route Parameters

    A router library is no good if we have to hardcode every single route in our application. In this le ...

  9. [React] React Router: IndexRoute

    IndexRoute allows us to define a default child component to be rendered at a specific route when no ...

  10. [React] React Router: Nested Routes

    Since react-router routes are components, creating nested routes is as simple as making one route a ...

随机推荐

  1. linux系统下安装python3及其配置

    Linux下安装Python3.6和第三方库 linux一般自带python2,不要动它,使用python3运行python脚本就好,部分linux系统命令依赖目前的python2环境, 比如yum! ...

  2. 使用PowerShell 自动安装IIS 及自动部署网站

    执行环境:Windows Server 2012 R2 安装iis核心代码,可自定义安装项 注意这里不能使用add-windowsfeature  "Web-Filtering", ...

  3. [loj#539][LibreOJ NOIP Round #1]旅游路线_倍增_dp

    「LibreOJ NOIP Round #1」旅游路线 题目链接:https://loj.ac/problem/539 题解: 这个题就很神奇 首先大力$dp$很好想,因为可以把一维放到状态里以取消后 ...

  4. Confluence与Jira安装及后期迁移问题记录

    Confluence与Jira 由于线上jira和confluence之前互相关联,confluence的登录用户全部关联自jira的用户,confluence安装时会提示是否关联jira,由于这个问 ...

  5. HDU-6704 K-th occurrence (后缀自动机father树上倍增建权值线段树合并)

    layout: post title: HDU-6704 K-th occurrence (后缀自动机father树上倍增建权值线段树合并) author: "luowentaoaa&quo ...

  6. 【spring boot】3.spring boot项目,绑定资源文件为bean并使用

    整个例子的结构目录如下: 1.自定义一个资源文件 com.sxd.name = 申九日木 com.sxd.secret = ${random.value} com.sxd.intValue = ${r ...

  7. 怎样安装 cnpm 并切换到淘宝镜像?

    如果不使用 vpn , 在国内直接使用 npm 的官方镜像会很慢,这里推荐使用淘宝 NPM 镜像.淘宝 NPM 镜像是一个完整的 npmjs.org 镜像,可以用此代替官方版本(只读). 操作方法如下 ...

  8. Sublime Text3 插件收录

    收录常用的Sublime Text3 插件, 方便安装使用,免得每次一个个的搜, 欢迎补充 安装方法直接打开install package 搜索安装 1. Babel 支持react jsx语法 2. ...

  9. 关于c语言的文法分析问题

    <程序>  ->   <声明> | <程序> <函数> <声明>  ->   #include<stdio.h>|# ...

  10. MYSQL 修改语句(数据)

    修改数据(UPDATE)     如果你失忆了,希望你能想起曾经为了追求梦想的你.     我们玩QQ.微信.淘宝等等,都会有一个操作:修改信息   淘宝常用的嘛,新增了收货地址,也可以修改它,微信/ ...