二、Vue Router 提供的标签组件

支持用户在具有路由功能的应用中(点击)导航。通过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>
  • 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，称之为命名视图，会渲染对应路由配置中的对应组件。用于多视图的处理。
posted @ 2019-12-01 19:29  yuxi2018  阅读(436)  评论(0)  编辑  收藏  举报