# 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
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
2
3
# <router-link>Props
# to
类型:
string | Locationrequired
表示目标路由的链接。当被点击后，内部会立刻把 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
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
2
3
# navType
类型:
String默认值:
push
需要跳转的 NAVTYPE 类型
<router-link to="/tabbar-4/tabbar-4" navType="pushTab">
<button type="default">指定跳转到uni-app自带tab</button>
</router-link>
1
2
3
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
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
2
3