Vue Router 提供的标签组件

Posted 2020-11-26 yuxi2018

router-link 声明式导航组件标签

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

将激活 class 应用在外层元素

外层元素必须是其他标签，<a>标签将作为真实的链接，而激活时的CSS类名则设置到外层的标签元素上。

<router-link tag="li" to="/login">
    <a>Login</a>
</router-link>
<!-- 最终输出结果为： -->
<li class="router-link-exact-active router-link-active"><a href="/login">Login</a></li>

router-link 参数

• to：属性，表示目标路由的路径，必填。被点击后，内部立刻把to的值传到router.push()，所以这个值可以是一个字符串，或是描述目标位置的对象。
• replace:属性，点击时，会调用router.replace()，不会留下history记录，这个必须是在history模式下才生效。
• append:属性，在当前(相对)路径前添加基路径。如：从/a跳转到义工相对路径/b，如果没有配置append，则路径为/b，如果配置了，则为/a/b
• tag:属性，可以渲染成指定标签
• active-class:属性，默认值为router-link-active，设置链接激活时使用的CSS类名，可以通过路由的构造选项linkActiveClass来全局配置
• exact:属性，为路径精确匹配
• event:属性，可以指定用来触发导航的事件，可以是一个字符串，也可以是一个包含字符串的数组
• exact-active-class:属性，是设置精准匹配的类名

<!-- to：属性的一些常用方式 -->
<!-- 字符串 -->
<router-link to="home">Home</router-link>
<!-- 渲染结果 -->
<a href="home">Home</a>

<!-- 使用 v-bind 的 JS 表达式 -->
<router-link v-bind:to="'home'">Home</router-link>
<!-- 参数为对象的形式 -->
<router-link :to="{ path: 'home' }">Home</router-link>
<!-- 命名路由 /user/123 -->
<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>

router-view 路由视图组件(为路由的出口)

<router-view>渲染路径匹配到的视图组件。可以内部嵌套，根据嵌套路径，渲染嵌套组件。可以配合<transition>和<keep-alive>使用，为以下固定写法：

<transition>
    <keep-alive>
        <router-view></router-view>
    </keep-alive>
</transition>

• name:属性，默认为default，称之为命名视图，会渲染对应路由配置中的对应组件。用于多视图的处理。