属性

to 路由的链接

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

  1. <!-- 字符串 -->
  2. <router-link to="home">Home</router-link>
  3. <!-- 渲染结果 -->
  4. <a href="home">Home</a>
  5. <!-- 使用 v-bind 的 JS 表达式 -->
  6. <router-link v-bind:to="变量">Home</router-link>
  7. <!-- 不写 v-bind 也可以,就像绑定别的属性一样 -->
  8. <router-link :to="变量">Home</router-link>
  9. <!-- 同上 -->
  10. <router-link :to="{ path: 'home' }">Home</router-link>
  11. <!-- 命名的路由 -->
  12. <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
  13. <!-- 带查询参数,下面的结果为 /register?plan=private -->
  14. <router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

tag 渲染成什么标签(vue2)

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

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

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

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

replace 不留history 记录

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

event 触发导航的事件

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

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

active-class 当前页面添加class

对应的路由作为当前页面显示时,将自动设置 class 属性值 .router-link-active
image.png
这个class的名字,可以通过在router文件夹里面的index.js,添加一个linkActiveClass:”class名” ,进行修改。

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

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

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

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

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

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

插槽(vue3)

image.png

a标签

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

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

传值

image.png
href:要跳转的链接
navigate:触发跳转的方法,见上a标签

image.png
isActive:显示是否页面处于激活(活跃)状态
image.png

transition动画 和 keepAlive (vue3)

image.png

transition动画 可以查看 Vue - 动画