Инкапсуляция маршрутизации для одного приложения (последнюю версию см. на github)

Создать проект

Первая проблема легко решить, сначала сделайте централизованное управление, создайте файл (Router.js) для централизованного управления, в структуре каталогов

код показывает, как показано ниже

export default {
  // 首页页面
  index: '/pages/index/index.vue',
  // 我的页面
  my: '/pages/my/index.vue'
}

Так становится при использовании

<template>
  <view class="content">
    <image class="logo" src="/static/logo.png"></image>
    <view>
      <text class="title">{{title}}</text>
    </view>
    <button @click="openPage">跳转到我的页面</button>
  </view>
</template>
<script>
  import url from '../../router'
  export default {
    data() {
      return {
        title: 'index'
      }
    },
    onLoad() {    },
    methods: {
      openPage () {
        uni.navigateTo({
          url: url.my
        })
      }
    }
  }
</script>

Внедрять router.js при его использовании очень хлопотно, так что давайте не будем сначала решать эту проблему

Давайте посмотрим на второй и третий вопросы

Давайте посмотрим на пример

В случае со многими параметрами это действительно не просто и хлопотно в работе.Можете ли вы вынести часть параметра отдельно, а затем соединить его с URL-адресом?

Удивительно, но я обнаружил, что переданное число превратилось в строку, и параметры нельзя было сохранить верными.

Четвертый вопрос не будет продемонстрирован

Не много глупостей, я так много сказал, я считаю, что вы также должны знать проблему, давайте решать эти проблемы (шаг за шагом)

Сначала создайте файл (MinRouter.js) со следующей структурой каталогов.

Следующий код решает первую проблему

Нет необходимости использовать файл router.js

import urlSet from './router';
function openPage (url) {  
    uni.navigateTo({
        url: `${urlSet[url]}`
    })
}
export default openPage

Файл main.js изменен следующим образом.

import Vue from 'vue'
import App from './App'
// 引入MinRouter文件
import openPage from './MinRouter'
Vue.config.productionTip = false
App.mpType = 'app'
// 添加到全局
global.openPage = openPage
const app = new Vue({
    ...App
})
app.$mount()

Как использовать

<template>
  <view class="content">
      <image class="logo" src="/static/logo.png"></image>
      <view>
          <text class="title">{{title}}</text>
      </view>
      <button @click="toPage">跳转到我的页面</button>
</view>
</template>
<script> 
 export default {
    data() {      
        return {
            title: 'index'
        }
    },
    onLoad() {    },
    methods: {
      toPage () {
        global.openPage('my')
      }    
 }  
}
</script>

Решим вторую и третью задачи

С третьей проблемой наверняка сталкивались многие: я хотел передать число, но что бы я ни передал, оно становилось строкой.

Есть ли способ восстановить исходный тип данных после того, как они были преобразованы в строку?

использоватьJSONОн может решить вышеуказанную проблему, а также очень хорошо решает вторую проблему.

Попробуйте изменить исходный код

import urlSet from './router';
function openPage (url, query) {
  const queryStr = JSON.stringify(query)
  uni.navigateTo({
    url: `${urlSet[url]}?query=${queryStr}`
  })}
export default openPage

Как использовать

<template>
  <view class="content">
    <image class="logo" src="/static/logo.png"></image>
    <view>
      <text class="title">{{title}}</text>
    </view>
    <button @click="toPage">跳转到我的页面</button>
  </view></template><script>  
export default {
    data() {
      return {
        title: 'index'
      }
    },
    onLoad() {    },
    methods: {
      toPage () {
        global.openPage('my', {id: 123})
      }
    }
  }
</script>

Решим четвертую задачу

(=&?) и другие специальные символы имеют особое значение в URL-адресе, поэтому нам нужно закодировать строку json.

import urlSet from './router';
function openPage (url, query) {
  const queryStr = encodeURIComponent(JSON.stringify(query))
  uni.navigateTo({
    url: `${urlSet[url]}?query=${queryStr}`
  })}
export default openPage

На данный момент все вышеперечисленные проблемы решены, но ощущения все равно не очень.Можно ли запаковать в Vue-плагин, аналогичный VueRouter?

ответ да

Формование пакетов MinRouter

Файл router.js изменен на следующий

import MinRouter from './MinRouter'
// 配置路由
const router = new MinRouter({
  routes: [
    {
      // 页面路径
      path: 'pages/index/index',
      name: 'index'
    },
    {
      path: 'pages/my/index',
      name: 'my'
    }
  ]
 })
export default router

Файл main.js изменен на следующий

import Vue from 'vue'
import App from './App'
// 引入MinRouter文件
import MinRouter from './MinRouter'
// 引入router文件
import minRouter from './router'
Vue.config.productionTip = false
// 注册插件
Vue.use(MinRouter)
App.mpType = 'app'
const app = new Vue({
    ...App,
    minRouter
})
app.$mount()

Приведенная выше конфигурация кода уже очень похожа на VueRouter.

Файл в MinRouterДобавить кследующий код

const toString = Object.prototype.toStringfunction
 isObject (value) {
  return toString.call(value) === '[object Object]'
}
function isString (value) {
  return toString.call(value) === '[object String]
'}
function isDefault (value) {
  return value === void 0
}
function install (Vue) {
  Vue.mixin({
    beforeCreate: function () {
      if (!isDefault(this.$options.minRouter)) {
        Vue._minRouter = this.$options.minRouter
      }    
}  
})  
Object.defineProperty(Vue.prototype, '$minRouter', {
    get: function () {
      return Vue._minRouter._router
    }
  })
}
function MinRouter (options) {
  if (!(this instanceof MinRouter)) {
    throw Error("MinRouter是一个构造函数，应该用`new`关键字调用")
  }
  isDefault(options) && (options = {})
  this.options = options
  this._router = options.routes || []
}
MinRouter.install = install
export default MinRouter

Зададим параметры openPage

имя: указывает страницу для перехода

запрос: параметр, который будет использоваться для перехода на страницу

调用方式：   openPage({name: 跳转的页面, query: {id: 123}})

Функция openPage выглядит следующим образом

function openPage (args) {
  let {name, query = {}} = args
  let queryStr = null, path
  queryStr = encodeURIComponent(JSON.stringify(query))
  this.$minRouter.forEach(item => {
    if (item.name === name) {
      path = item.path
    }
  })
  return new Promise((resolve, reject) => {
    uni.navigateTo({
      url: `/${path}?query=${queryStr}`,
      success: resolve,
      fail: reject
    })
  })
}

this.$minRouter已经在上面的代码代理过来了，不要觉得奇怪，其实就是配置路由中的routes

import MinRouter from './MinRouter'
// 配置路由
const router = new MinRouter({
  routes: [
    {
      // 页面路径
      path: 'pages/index/index',
      // type必须是以下的值['navigateTo', 'switchTab', 'reLaunch', 'redirectTo']
      // 跳转方式(默认跳转方式)
      type: 'navigateTo',
      name: 'index'
    },
    {
      path: 'pages/my/index',
      name: 'my'
    }
  ]
 })
export default router

function openPage (args) {
  let name, query = {}, queryStr = null, path, type
  switch (true) {
    case isObject(args):
      ({name, query = {}} = args)
      break
    case isString(args):
      name = args
      break
    default:
      throw new Error('参数必须是对象或者字符串')
  }
  if (isObject(query)) {
    queryStr = encodeURIComponent(JSON.stringify(query))
  } else {
    throw new Error('query数据必须是Object')
  }
  this.$minRouter.forEach(item => {
    if (item.name === name) {
      path = item.path
      type = item.type || 'navigateTo'
    }
  })
  if (!['navigateTo', 'switchTab', 'reLaunch', 'redirectTo'].includes(type)) {
    throw new Error(`name:${name}里面的type必须是以下的值['navigateTo', 'switchTab', 'reLaunch', 'redirectTo']`)
  }
  return new Promise((resolve, reject) => {
    uni[type]({
      url: `/${path}?query=${queryStr}`,
      success: resolve,
      fail: reject
    })
  })
}

Сказав, что не говорил, как разрешить параметры маршрутизации

Следующая функция анализирует параметры маршрута

function parseURL () {
  const query = this.$root.$mp.query.query
  if (query) {
    return JSON.parse(decodeURIComponent(query))
  } else {
    return {}
  }
}