更新记录

1.0.1（2023-02-10）

version: 1.0.0

• 更新第一版本

version: 1.0.1

• 修改导入插件时文件目录

1.0.0（2023-02-10）

2023/2/10

• version 1.0.0 全端兼容

平台兼容性

Project setup

yarn install

Compiles and hot-reloads for development

yarn serve

project type

cli 形式项目

实例返回

{ to, from, next }
to: {String} 跳转目标路径
from: {String} 跳转来自路径
next: {Function} 控制跳转

需配置 vue.config.js

"use strict";
const path = require("path");

function resolve(dir) {
  return path.join(__dirname, dir);
}

const name = "navigation-guard"; // project title

module.exports = {
  lintOnSave: process.env.NODE_ENV === "development",
  configureWebpack: {
    name: name,
    resolve: {
      alias: {
        "@": resolve("src"),
        "@utils": resolve("src/utils"),
      },
    },
  },
};

navigation-guard

• 插件涉及的 js 文件 {你存放的路径}/setting.js

setting.js

需要配置 setting 文件下的应用首页路径

/** @name 全局配置 */
const SETTING = {
  /** @name {string} [APPHomePage] 应用首页路由 */
  APPHomePage: "/pages/index/index",
};
export default SETTING;

• navigation-guard 文件夹下的 js

// index.js

import Vue from "vue";
import NavigationGuard from "./navigation-guard";

export default {
  install(Vue) {
    Vue.prototype.NavigationGuard = NavigationGuard;
  },
};

// navigation-guard.js
// 省略...(自己看代码)

使用说明

支持类型

"navigateTo" "redirectTo" "reLaunch" "preloadPage" "navigateBack" "switchTab"

NavigationGuard 传参类型

// navigateTo redirectTo reLaunch preloadPage
new NavigationGuard({
  linkType: "navigateTo", // 必传
  url: "/pages/design/design", // 必传
  query: {
    name: "navigationGuard",
    id: 1230123,
  }, // 可选
});

// switchTab
new NavigationGuard({
  linkType: "switchTab", // 必传
  url: "/pages/design/design", // 必传
});

// navigateBack
new NavigationGuard({
  linkType: "navigateBack", // 必传
  delta: 1, // 必传
});

1. 插件形式运行

• main.js

import NavigationGuardPlugin from "{你存放的路径}/navigation-guard/index";
Vue.use(NavigationGuardPlugin);

• 页面调用

<button @click="handle">design</button>

async handle() {
  const guard = new this.NavigationGuard({
    linkType: "navigateTo",
    url: "/pages/design/design",
    query: {
      name: "navigationGuard",
      id: 1230123,
    },
  });

  const { to, from, next } = await guard.routerInterceptor();

  next(); // 必需调用才能跳转
}

2. es6 import 运行

<button @click="handle">design</button>

• 页面导入

import NavigationGuard from "{你存放的路径}/navigation-guard/navigation-guard";

async handle() {
  const guard = new NavigationGuard({
    linkType: "navigateBack",
    delta: 1,
  });
  const { to, from, next } = await guard.routerInterceptor();
  next();
},