属性
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文件夹里面的index.js,添加一个linkActiveClass:”class名” ,进行修改。
const router = new VueRouter({
mode: 'history',
linkActiveClass:"active",// 修改active-class的默认名字
routes
})
exact-active-class 精确匹配当前页面
当
什么是精确匹配?
假设有个页面 /home/shops
active-class,只要路径包含了/home,都会被添加
exact-active-class,必须是/home/shops,这个页面的才会添加这个
======================
插槽(vue3)
a标签
没有标签包裹,跳转就会失效,需要用props的navigate属性进行跳转到to属性的链接
传值
href:要跳转的链接
navigate:触发跳转的方法,见上a标签
isActive:显示是否页面处于激活(活跃)状态
transition动画 和 keepAlive (vue3)
transition动画 可以查看 Vue - 动画