低代码高性能原生UI框架

Appearance

本页导读

路由 router ​

这是一个参考 vue-router 的api设计实现的 uts 路由库，支持 vue-router 的绝大数功能特色，如全局路由自定义 routes 配置，beforeEach、afterEach 等全局导航守卫，路由元信息等丰富的 api 供开发者灵活使用。

功能特色 ​

  • 完全对齐 vue-router 的API设计用法
  • 支持多种导航守卫
  • 支持应用启动拦截守卫
  • 支持路由返回守卫
  • 支持异步拦截守卫
  • 支持组件式用法
  • 自动生成 pages.json 路由配置映射
  • 支持 uni ext api用法。【需升级插件到v1.1.5或以上版本】
  • ...其他更多优秀的工具方法

前提配置 ​

首先在项目根目录下创建 vite.config.ts 配置文件，内容如下： ​

ts
import { defineConfig } from 'vite';
import uni from '@dcloudio/vite-plugin-uni';

import router from './uni_modules/ux-frame/libs/plugins/router/index.mjs';

export default defineConfig({
	plugins: [
		uni(),
		router({
			pagesJsonMappingFile: 'uni_modules/ux-frame/libs/types/pages.uts',
			routerFile: 'router/router.uts'
		})
	]
});
import { defineConfig } from 'vite';
import uni from '@dcloudio/vite-plugin-uni';

import router from './uni_modules/ux-frame/libs/plugins/router/index.mjs';

export default defineConfig({
	plugins: [
		uni(),
		router({
			pagesJsonMappingFile: 'uni_modules/ux-frame/libs/types/pages.uts',
			routerFile: 'router/router.uts'
		})
	]
});

在 main.uts 安装插件 ​

ts
import App from './App.uvue'
import { createSSRApp } from 'vue'

import { router } from '@/uni_modules/ux-frame'
import routes from './router/router.uts';

export function createApp() {
  const app = createSSRApp(App)
 
  app.config.globalProperties.$router = router(routes)

  return {
    app,
  }
}
import App from './App.uvue'
import { createSSRApp } from 'vue'

import { router } from '@/uni_modules/ux-frame'
import routes from './router/router.uts';

export function createApp() {
  const app = createSSRApp(App)
 
  app.config.globalProperties.$router = router(routes)

  return {
    app,
  }
}

使用方式 ​

API ​

ts
// 组合式
import{ $ux} from '@/uni_modules/ux-frame'
$ux.Router.useRouter().push('/pages/component/basic/layout/layout')

// 选项式
this.$ux.Router.useRouter().push('/pages/component/basic/layout/layout')
// 组合式
import{ $ux} from '@/uni_modules/ux-frame'
$ux.Router.useRouter().push('/pages/component/basic/layout/layout')

// 选项式
this.$ux.Router.useRouter().push('/pages/component/basic/layout/layout')