• vue之router-link


    <router-link> 组件支持用户在具有路由功能的应用中(点击)导航。 

    1、to:表示目标路由的链接。当被点击后,内部会立刻把 to 的值传到 router.push(),所以这个值可以是一个字符串或者是描述目标位置的对象。

    <!-- 字符串 -->

    <router-link to="home">Home</router-link>

    <!-- 使用 v-bind 的 JS 表达式 -->

    <router-link v-bind:to="'home'">Home</router-link>

    <!-- 不写 v-bind 也可以,就像绑定别的属性一样 -->

    <router-link :to="'home'">Home</router-link>

    <!-- 同上 -->

    <router-link :to="{ path: 'home' }">Home</router-link>

    <!-- 命名的路由 -->

    <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>

    2、replace:设置 replace 属性的话,当点击时,会调用 router.replace() 而不是 router.push(),于是导航后不会留下 history 记录。

    <router-link :to="{ path: '/abc'}" replace></router-link>

    3、append:设置 append 属性后,则在当前(相对)路径前添加基路径。例如,我们从 /a 导航到一个相对路径 b,如果没有配置 append,则路径为 /b,如果配了,则为 /a/b

      <router-link :to="{ path: 'relative/path'}" append></router-link>

    4、tag:有时候想要 <router-link> 渲染成某种标签,例如 <li>。

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

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

    <router-link :to="{path:'/'}" active-class="navA"></router-link>

    6、exact:"是否激活" 默认类名的依据是 inclusive match (全包含匹配)。

      <!-- 这个链接只会在地址为 / 的时候被激活 -->

    <router-link tag="a" :to="{path:'/'}" active-class="cur" exact>Hello World</router-link>

    <router-link tag="a" :to="{path:'/AboutUS'}" active-class="cur" exact>About US</router-link>

  • 相关阅读:
    Checking Types Against the Real World in TypeScript
    nexus pip proxy config
    go.rice 强大灵活的golang 静态资源嵌入包
    几个golang 静态资源嵌入包
    rpm 子包创建学习
    Rpm Creating Subpackages
    ava 类似jest snapshot 功能试用
    ava js 测试框架基本试用
    The Architectural Principles Behind Vrbo’s GraphQL Implementation
    graphql-compose graphql schema 生成工具集
  • 原文地址:https://www.cnblogs.com/shirliey/p/8926166.html
Copyright © 2020-2023  润新知