# simple-router中的 <router-link>

如果你还不够不了解 <router-link> 点击 组件式导航查看学习

# NPM注册(推荐)

// main.js
import routerLink from './node_modules/uni-simple-router/component/router-link.vue'
Vue.component('router-link',routerLink)
1
2
3

# 插件市场注册

// main.js
import routerLink from './js_sdk/hhyang-uni-simple-router/component/router-link.vue';
Vue.component('router-link',routerLink)
1
2
3

# to

  • 类型: string | Location

  • required

表示目标路由的链接。当被点击后,内部会立刻把 to 的值传到 router.push(),所以这个值可以是字符串对象,也可以是一个绝对路径,也可以是一个相对路径

<router-link to="{name: tabbar-4,params: {name: '我只想去tab5的router-link'}}" navType="pushTab">
  <button type="primary">使用name对象跳转</button>
</router-link>

<router-link to="{path: '/pages/tabbar/tabbar-4/tabbar-4',query: {name: '我只想去tab5的router-link'}}" navType="pushTab">
  <button type="primary">使用path对象跳转</button>
</router-link>

<router-link to="{path: '/tabbar-4/tabbar-4,query': {name: '我只想去tab5的router-link'}}" navType="pushTab" :level="2" :append="true">
  <button type="primary">使用path对象继承父路径跳转</button>
</router-link>

<router-link to="/pages/tabbar/tabbar-4/tabbar-4" navType="pushTab">
  <button type="warn">通过路由path直接跳转</button>
</router-link>

<router-link to="/tabbar-4/tabbar-4" navType="pushTab" :level="2" :append="true">
  <button type="warn">通过路由path继承父路径跳转</button>
</router-link>

<router-link to="/tabbar-4/tabbar-4" navType="pushTab" :level="2" :append="true" :stopNavto="true">
  <button type="default">阻止组件事件,不会跳转</button>
</router-link>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# stopNavto

  • 类型: Boolean

  • 默认值: false

默认绑定事件为点击事件,不阻止。

<router-link to="/tabbar-4/tabbar-4"  :stopNavto="true">
  <button type="default">阻止组件事件,不会跳转</button>
</router-link>
1
2
3
  • 类型: String

  • 默认值: push

需要跳转的 NAVTYPE 类型

<router-link to="/tabbar-4/tabbar-4"  navType="pushTab">
  <button type="default">指定跳转到uni-app自带tab</button>
</router-link>
1
2
3

# level

  • 类型: Number

  • 默认值: 1

相对于当前页面路径,以 / 从后往前裁切的层级。append 为true时生效

<router-link to="{path: '/tabbar-4/tabbar-4,query'}" :level="2" :append="true">
  <button type="primary">使用path对象继承父路径跳转</button>
</router-link>
1
2
3

# append

  • 类型: Boolean

  • 默认值: false

是否相对于当前页面路径跳转。根据 level 层级截取的路径 拼接 to只针对使用path跳转的情况

<router-link to="{path: '/tabbar-4/tabbar-4,query'}" :level="2" :append="true">
  <button type="primary">使用path对象继承父路径跳转</button>
</router-link>
1
2
3