fly63前端网

www.fly63.com

首页文章资源工具教程 栏目
  • 关于我们
  • 网站投稿
  • 赞助一下
搜索

在线工具_工作生活好帮手

打造各种简单、易用、便捷的在线工具,网友无需注册和下载安装即可使用

点击查看

关闭

提交网站

uni-simple-router
分享
复制链接
新浪微博
QQ 好友

扫一扫分享

网站地址:https://github.com/SilurianYang/uni-app-tools
GitHub:https://github.com/SilurianYang/uni-simple-router
网站描述:一个更为简洁的Vue-router,专为 uni-app 量身打造

是否你也曾感叹过为啥官方就不搞一个类似 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.js

import 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://fly63.com/nav/2696

more>>
相关栏目
uni-app
使用 Vue.js开发跨平台应用的前端框架
官网GitHub
Flutter
谷歌推出的跨平台移动UI框架
官网GitHub
framework7
用于开发接近原生iOS或Android系统外观和体验的 hybrid mobile apps 或 web apps
官网GitHub
ionic
ionic是一个用来开发混合手机应用的,开源的,免费的代码库
官网GitHub
weex
阿里推出的Native框架,支持iOS、安卓、YunOS及Web等多端部署
官网GitHub
Taro
多端统一开发框架,生成能运行在微信小程序、H5、React Native 等的应用
官网GitHub
React Belle
一个React组件库
官网GitHub
noUiSlider
一个轻量级的Js范围滑块库
官网GitHub
mavonEditor
基于vue的markdown编辑器
点击进入GitHub
fair ui
为Flutter设计的动态化框架
官网GitHub
react-native-ui-lib
React Native的UI组件库和工具集
官网GitHub
react-native-sideswipe
简单跨平台的React Native可滑动的组件
点击进入GitHub
weui+
在weui和zepto基础上开发的增强UI组件
官网GitHub
weui
微信官方设计团队为微信内网页和微信小程序量身设计的的基础样式库
官网GitHub
ThorUI
轻量、简洁的移动端组件库
官网GitHub
MUI
最接近原生APP体验的高性能前端框架
官网GitHub

手机预览