NervJS / taro

开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5/React Native 等应用。 https://taro.zone/
https://docs.taro.zone/
Other
35.29k stars 4.76k forks source link

[v3.6.24] 在小程序中无法触发vue-router的全局拦截监听 #15297

Open NoahSun opened 6 months ago

NoahSun commented 6 months ago

相关平台

微信小程序

小程序基础库: 3.3.3 使用框架: Vue 3

复现步骤

import { createApp } from "vue";
import { createRouter, createWebHistory } from "vue-router";
import "./app.scss";

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: "/",
      name: "Index",
      component: () => import("./pages/index/index.vue"),
    },
    {
      path: "/second",
      name: "Second",
      component: () => import("./pages/second/index.vue"),
    },
  ],
});

router.beforeEach((to, from, next) => {
  console.log("to: ", to, "from: ", from);
  next();
});

const App = createApp({
  onShow(options) {},
  // 入口组件不需要实现 render 方法,即使实现了也会被 taro 所覆盖
});

App.use(router);

export default App;

期望结果

可以触发vue-router的全局拦截器

实际结果

首次进入的时候会触发beforeEach,但是使用Taro.navigateTo跳转时不会触发

环境信息

Taro CLI 3.6.24 environment info:
    System:
      OS: Windows 11 10.0.22631
    Binaries:
      Node: 20.11.1 - D:\nodejs\node.EXE
      Yarn: 1.22.4 - D:\Yarn\bin\yarn.CMD
      npm: 10.2.4 - D:\nodejs\npm.CMD
    npmPackages:
      @tarojs/cli: 3.6.24 => 3.6.24 
      @tarojs/components: 3.6.24 => 3.6.24 
      @tarojs/helper: 3.6.24 => 3.6.24 
      @tarojs/plugin-framework-vue3: 3.6.24 => 3.6.24
      @tarojs/plugin-html: ^3.6.24 => 3.6.24
      @tarojs/plugin-platform-alipay: 3.6.24 => 3.6.24
      @tarojs/plugin-platform-h5: 3.6.24 => 3.6.24
      @tarojs/plugin-platform-jd: 3.6.24 => 3.6.24
      @tarojs/plugin-platform-qq: 3.6.24 => 3.6.24
      @tarojs/plugin-platform-swan: 3.6.24 => 3.6.24
      @tarojs/plugin-platform-tt: 3.6.24 => 3.6.24
      @tarojs/plugin-platform-weapp: 3.6.24 => 3.6.24
      @tarojs/router: ^3.6.24 => 3.6.24
      @tarojs/runtime: 3.6.24 => 3.6.24
      @tarojs/shared: 3.6.24 => 3.6.24
      @tarojs/taro: 3.6.24 => 3.6.24
      @tarojs/taro-loader: 3.6.24 => 3.6.24
      @tarojs/webpack5-runner: 3.6.24 => 3.6.24
      babel-preset-taro: 3.6.24 => 3.6.24
      eslint-config-taro: 3.6.24 => 3.6.24
TheKonka commented 6 months ago

我没看具体代码,但是如果短时间找不到解决方案的话,应该也可以自己重写跳转实现

function customNavigateTo(url: string) {
    from = Taro.getCurrentPages().at(-1).route
    to = url
    console.log("to: ", to, "from: ", from);
    Taro.navigateTo({ url });
}