属性

to 路由的链接

当被点击后，内部会立刻把 to 的值传到 router.push()，所以这个值可以是一个字符串或者是描述目标位置的对象。

<!-- 字符串 -->
<router-link to="home">Home</router-link>
<!-- 渲染结果 -->
<a href="home">Home</a>
<!-- 使用 v-bind 的 JS 表达式 -->
<router-link v-bind:to="变量">Home</router-link>
<!-- 不写 v-bind 也可以，就像绑定别的属性一样 -->
<router-link :to="变量">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>

tag 渲染成什么标签（vue2）

tag属性可以设置这个a标签，要渲染成什么标签，如例子是button，就显示成按钮，同时点击事件也还在

tag可以使用其他组件的标签，如tag=”el-button”

<!--tag属性可以设置这个a标签，要渲染成什么标签，如例子是button，就显示成按钮-->
<!--tag可以使用其他组件的标签，如tag="el-button"-->
<router-link to="/test2" tag="button">Test2</router-link>

Vue3和对应的Vue Router4已经删除了这个。取而代之的是插槽

replace 不留history 记录

<!--增加replace这个属性后，点击会调用 router.replace() 而不是 router.push()，于是导航后不会留下 history 记录-->
<router-link to="/hi" replace>hi</router-link>

event 触发导航的事件

默认是click，点击并释放。如下例子改为双击才跳转

<router-link to="/test2" event="dblclick">Test2</router-link>

active-class 当前页面添加class

当 对应的路由作为当前页面显示时，将自动设置 class 属性值 .router-link-active

这个class的名字，可以通过在router文件夹里面的index.js，添加一个linkActiveClass:”class名” ，进行修改。

const router = new VueRouter({
  mode: 'history',
  linkActiveClass:"active",// 修改active-class的默认名字
  routes
})

exact-active-class 精确匹配当前页面

当 对应的路由作为当前页面显示时，同时又是精确设置的，将自动设置 class 属性值 .router-exact-link-active

什么是精确匹配？
假设有个页面 /home/shops

active-class，只要路径包含了/home，都会被添加
exact-active-class，必须是/home/shops，这个页面的才会添加这个

======================

插槽（vue3）

a标签

标签包裹，你点击任意一个按钮，都会跳转到to属性的链接

没有标签包裹，跳转就会失效，需要用props的navigate属性进行跳转到to属性的链接

传值

href：要跳转的链接
navigate：触发跳转的方法，见上a标签

isActive：显示是否页面处于激活（活跃）状态

transition动画 和 keepAlive （vue3）

transition动画 可以查看 Vue - 动画