uni-simple-router

编程之家收集整理的这个编程导航主要介绍了uni-simple-router编程之家,现在分享给大家,也给大家做个参考。

uni-simple-router

uni-simple-router 介绍

是否你也曾感叹过为啥官方就不搞一个类似 vue-router 一样的路由管理器?苦苦寻找。搜遍百度?社区?以及 Google?甚至是官方的各大 QQ 群?难受没找到!直到此插件出来之前也没有一个更好的解决方法。于是它,没错,就是它,它诞生了。只要你会使用 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)

组件式的导航

这是一个很难抉择的问题?加还是不加这是一个问题!为了让开发者更快捷,最后还是封装上了 router-link 组件。为了能满足多端这里必须批评下 微信小程序,它要搞特殊。没得办法的!所以没法帮你们注册组件。它那玩意只能在 main.js 中才能注册组件!!!! 不多说了,直接上代码。

注册组件:
// main.jsimport routerLink from './node_modules/uni-simple-router/component/router-link.vue'vue.component('router-link',routerLink)
使用组件:

// xxxx.vue

<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>

网站地址:https://github.com/SilurianYang/uni-app-tools

GitHub:https://github.com/SilurianYang/uni-simple-router

网站描述:一个更为简洁的Vue-router,专为 uni-app 量身打造

uni-simple-router官方网站

官方网站:https://github.com/SilurianYang/uni-app-tools

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

相关文章

WXPage,一个极其轻量的微信小程序开发框架
PhoneGap,一个采用HTML,CSS和JavaScript的技术,创建移动跨...
Mobiscroll,渐进式Web和混合应用程序的跨平台UI控件
Remax,全新的小程序开发体验
mobilebone.js,单页切换骨架
WeZRender,微信小程序Canvas开发