uni-simple-router
一个更为简洁的Vue-router,专为 uni-app 量身打造
简介说明:
是否你也曾感叹过为啥官方就不搞一个类似 直到此插件出来之前也没有一个更好的解决方法。于是它,没错,就是它,它诞生了。只要你会使用Vue-router即可马上上手,下面文档的完全不用看。它保留了Vue-router完全相似的书写风格,让你 倍感亲切 !
大纲
安装
NPM
复制代码npm install uni-simple-router
如果在一个模块化工程中使用它,必须要通过 Vue.use() 明确地安装路由功能:
复制代码import Vue from 'vue'
import Router from 'uni-simple-router'
Vue.use(Router)
组件式的导航 1.2.2+
这是一个很难抉择的问题?加还是不加这是一个问题!为了让开发者更快捷,最后还是封装上了 router-link 组件。为了能满足多端这里必须批评下 微信小程序,它要搞特殊。没得办法的!所以没法帮你们注册组件。它那玩意只能在 main.js 中才能注册组件!!!! 不多说了,直接上代码。
注册组件:
复制代码// main.js
import routerLink from './node_modules/uni-simple-router/component/router-link.vue'
Vue.component('router-link',routerLink)
使用组件:
复制代码// xxxx.vue
使用name对象跳转
使用path对象跳转
使用path对象继承父路径跳转
通过路由path直接跳转
通过路由path继承父路径跳转
阻止组件事件,不会跳转
prop:
参数
类型
必填
默认值
描述
to
String
是
需要跳转的路径。可以是字符串对象,也可以是一个绝对路径,也可以是一个相对路径
stopNavto
Boolean
否
false
默认绑定事件为点击事件,不阻止。
navType
String
否
push
level
Number
否
1
相对于当前页面路径,以 / 从后往前裁切的层级。append 为true时生效
append
Boolean
否
false
是否相对于当前页面路径跳转。根据 level 层级截取的路径 拼接 to 。 只针对使用path跳转的情况
编程式的导航
router.push(location, onComplete?, ?) 等同于 uni.navigateTo()
注意:在 Vue 实例内部,你可以通过 \$Router 访问路由实例。因此你可以调用 this.\$Router.push。
想要导航到不同的 URL,则使用 this.\$Router.push 方法。这个方法会向 history 栈添加一个新的记录,所以,当用户点击后退按钮时,则回到之前的 URL。
该方法的参数可以是一个字符串路径,或者一个描述地址的对象。例如:
复制代码// 字符串
this.$Router.push('/pages/r