Web前端开发网

fly63.com

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

关闭

搜索

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

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

点击查看

资源分类

AI智能 酷站推荐 招聘/兼职 框架/库 模块/管理 移动端UI框架 Web-UI框架 Js插件 Jquery插件 CSS相关 IDE环境 在线工具 图形动效 游戏框架 node相关 调试/测试 在线学习 社区/论坛 博客/团队 前端素材 图标/图库 建站资源 设计/灵感 IT资讯
提交资源 / 链接反馈

uni-simple-router

分享
复制链接
新浪微博
QQ 好友

扫一扫分享

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

是否你也曾感叹过为啥官方就不搞一个类似 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
首页 技术导航 在线工具 技术文章 教程资源 AI工具集 前端库/框架 实用工具箱

Copyright © 2018 Web前端开发网提供免费在线工具、编程学习资源(教程/框架/库),内容以学习参考为主,助您解决各类实际问题,快速提升专业能力。

手机预览