uniappを使っていると個人的に非常に不親切な点があると感じているのは、プロジェクトが複雑でフォルダが細かくなると、ジャンプルーティングのコードを書くときにルーティングコードが長くなってしまったりすることです(強迫性障害)。 /
home この問題を解決するために、/project/list/cate/detail は、
ルート名をジャンプ ルートとして使用する一連のメソッドをカプセル化します (Vue ルートと同様)。
1. 新しいページを作成する
新しいページを作成した後、pages.json ファイル内のページに対応するページ構成に、routeName フィールド (カスタム) を追加します。
サブパッケージのルーティング (subPackage) は同じです
2. カプセル化機能
新しいルート フォルダーを作成し、index.js および router.js ファイルを作成します。
router.js ファイルに Pages.json を導入し、ページ ルーティング構成を取得して、それをルーティング コレクションに処理します。
格式： {
home_index: "/pages/home/index/index",
user_index: "/pages/user/index/index"
}
キーはpages.jsonで構成されたrouteNameで、値は対応するルーティングリンクです。
実装コードは次のとおりです。
const defaultPages = require('@/pages.json')
const {
pages,
subPackages
} = defaultPages.default
function getRouters() {
const _routes = {
}
pages.forEach(item => {
_routes[item.routeName] = `/${
item.path}`
})
subPackages.forEach(subPackage=>{
subPackage.pages.forEach(item=>{
_routes[item.routeName] = `/${
subPackage.root}/${
item.path}`
})
})
return _routes
}
export default getRouters()
Index.js ファイルに router.js を導入し、ルーティング セットを取得し、ルーティングとマージ パラメーターを処理して、最後にジャンプを実現します。
import routers from './router';
/**
* 路由跳转
* @param name 页面路由名称
* @param type 跳转方式
* @param params 携带参数
* @param delta 页面返回层级，仅 type='navigateBack' || type='back' 时生效
*/
function customRoute(config) {
let _routeName = typeof config === 'string' ? config : config.name
let _params = typeof config === 'string' ? {
} : config.params || {
}
let _type = typeof config === 'string' ? 'navigateTo' : config.type || 'navigateTo'
let _url = mixinParam(routers[_routeName], _params)
if (_type === 'navigateTo' || _type === 'to') {
uni.navigateTo({
url: _url })
}
if (_type === 'redirectTo' || _type === 'redirect') {
uni.redirectTo({
url: _url })
}
if (_type === 'switchTab' || _type === 'tab') {
uni.switchTab({
url: _url })
}
if (_type === 'reLaunch' || _type === 'launch') {
uni.reLaunch({
url: _url })
}
if (_type === 'navigateBack' || _type === 'back') {
uni.navigateBack({
delta: _params.delta || 1 })
}
}
export default customRoute
ルートパラメータの処理
function mixinParam(url, params) {
let query = ''
if (/.*\/.*\?.*=.*/.test(url)) {
query = uni.$u.queryParams(params, false)
return url += `&${
query}`
}
query = uni.$u.queryParams(params)
return url += query
}
4. ファンクションジャンプを使う
最初に Vue インスタンスにマウントします
import customRoute from '@/route'
Vue.prototype.$routeTo = customRoute
ジャンプ方法 1:
this.$routeTo({
name: 'user_index', // 须在pages.json配置routeName
type: 'navigateTo', // 非必填，跳转类型
params: {
// 非必填，携带参数
id: 12,
name: 'jack'
}
})
ジャンプ方法 2:
// 跳转
this.$routeTo('user_data')
// 返回上一级页面
this.$routeTo({
type: 'back'})
役立つと思われた場合は、お気軽に「いいね！」を押してください。
私をフォローし、技術的な乾物を時々共有していただきありがとうございます~