Comments on the router page #47

chengpeiquan · 2021-01-15T09:09:50Z

~

TransMux · 2022-04-06T08:55:18Z

作者功力深厚！受益良多！非常感谢！

chengpeiquan · 2022-04-06T13:54:39Z

作者功力深厚！受益良多！非常感谢！

谢谢你的称赞！感动！

paynezhuang · 2022-04-11T13:52:38Z

请问下，在里面设置onBeforeRouteUpdate，切换路由进来的时候无法生效，是咋回事呢。onBeforeRouteLeave在离开的时候是生效的
谢谢

chengpeiquan · 2022-04-11T15:54:21Z

请问下，在里面设置onBeforeRouteUpdate，切换路由进来的时候无法生效，是咋回事呢。onBeforeRouteLeave在离开的时候是生效的谢谢

需要在同一个路由才会触发这个钩子，比如：当前在页面 /detail/111 ，通过点击 router-link 访问 /detail/222

<template>
  <router-link to="/detail/222">只是更换不同的 params</router-link>
</template>

这样同一个路由，只是更新了 route.params.id ，组件处于被复用的状态，这样会触发 update 钩子

paynezhuang · 2022-04-12T01:03:29Z

@chengpeiquan

请问下，在里面设置onBeforeRouteUpdate，切换路由进来的时候无法生效，是咋回事呢。onBeforeRouteLeave在离开的时候是生效的谢谢

需要在同一个路由才会触发这个钩子，比如：当前在页面 /detail/111 ，通过点击 router-link 访问 /detail/222
<template>
  <router-link to="/detail/222">只是更换不同的 params</router-link>
</template>
这样同一个路由，只是更新了 route.params.id ，组件处于被复用的状态，这样会触发 update 钩子

非常感谢。刚刚路上也搜了下这。那在请问下，有没有什么可以在进来的时候触发。从A点击，push B，然后触发B某个函数

chengpeiquan · 2022-04-12T01:10:27Z

@chengpeiquan

请问下，在里面设置onBeforeRouteUpdate，切换路由进来的时候无法生效，是咋回事呢。onBeforeRouteLeave在离开的时候是生效的谢谢

需要在同一个路由才会触发这个钩子，比如：当前在页面 /detail/111 ，通过点击 router-link 访问 /detail/222
<template>
  <router-link to="/detail/222">只是更换不同的 params</router-link>
</template>
这样同一个路由，只是更新了 route.params.id ，组件处于被复用的状态，这样会触发 update 钩子
非常感谢。刚刚路上也搜了下这。那在请问下，有没有什么可以在进来的时候触发。从A点击，push B，然后触发B某个函数

不客气的！如果要进入页面自动触发的话，一般放在 onMounted 里调用就可以了，如果需要更早执行的话，可以放在 onBeforeMount 或者直接在 setup 阶段就运行，可以参考组件的生命周期那一部分内容

paynezhuang · 2022-04-12T01:41:35Z

@chengpeiquan
@chengpeiquan

请问下，在里面设置onBeforeRouteUpdate，切换路由进来的时候无法生效，是咋回事呢。onBeforeRouteLeave在离开的时候是生效的谢谢

需要在同一个路由才会触发这个钩子，比如：当前在页面 /detail/111 ，通过点击 router-link 访问 /detail/222
<template>
  <router-link to="/detail/222">只是更换不同的 params</router-link>
</template>
这样同一个路由，只是更新了 route.params.id ，组件处于被复用的状态，这样会触发 update 钩子
非常感谢。刚刚路上也搜了下这。那在请问下，有没有什么可以在进来的时候触发。从A点击，push B，然后触发B某个函数
不客气的！如果要进入页面自动触发的话，一般放在 onMounted 里调用就可以了，如果需要更早执行的话，可以放在 onBeforeMount 或者直接在 setup 阶段就运行，可以参考组件的生命周期那一部分内容

onMounted 这只有在第一次进去的时候触发。后台管理系统，正常打开了A/B/C三个标签页面生命周期会自动触发setup。我想实现的是，例如B有个函数是function do(){}，我想在A点击某个按钮，携带参数，push 到 B的时候，B能监听到，然后执行do()。 watch router 又是全局，不太适合我。

chengpeiquan · 2022-04-12T02:56:29Z

@chengpeiquan
@chengpeiquan

请问下，在里面设置onBeforeRouteUpdate，切换路由进来的时候无法生效，是咋回事呢。onBeforeRouteLeave在离开的时候是生效的谢谢

需要在同一个路由才会触发这个钩子，比如：当前在页面 /detail/111 ，通过点击 router-link 访问 /detail/222
<template>
  <router-link to="/detail/222">只是更换不同的 params</router-link>
</template>
这样同一个路由，只是更新了 route.params.id ，组件处于被复用的状态，这样会触发 update 钩子
非常感谢。刚刚路上也搜了下这。那在请问下，有没有什么可以在进来的时候触发。从A点击，push B，然后触发B某个函数
不客气的！如果要进入页面自动触发的话，一般放在 onMounted 里调用就可以了，如果需要更早执行的话，可以放在 onBeforeMount 或者直接在 setup 阶段就运行，可以参考组件的生命周期那一部分内容
onMounted 这只有在第一次进去的时候触发。后台管理系统，正常打开了A/B/C三个标签页面生命周期会自动触发setup。我想实现的是，例如B有个函数是function do(){}，我想在A点击某个按钮，携带参数，push 到 B的时候，B能监听到，然后执行do()。 watch router 又是全局，不太适合我。

可以 watch 那个参数来触发，或者使用 watchEffect 传入你那个函数，我最近刚好更新了数据监听部分的内容，看看是否能解决你的这个问题

paynezhuang · 2022-04-12T03:46:00Z

@chengpeiquan
@chengpeiquan
@chengpeiquan

请问下，在里面设置onBeforeRouteUpdate，切换路由进来的时候无法生效，是咋回事呢。onBeforeRouteLeave在离开的时候是生效的谢谢

需要在同一个路由才会触发这个钩子，比如：当前在页面 /detail/111 ，通过点击 router-link 访问 /detail/222
<template>
  <router-link to="/detail/222">只是更换不同的 params</router-link>
</template>
这样同一个路由，只是更新了 route.params.id ，组件处于被复用的状态，这样会触发 update 钩子
非常感谢。刚刚路上也搜了下这。那在请问下，有没有什么可以在进来的时候触发。从A点击，push B，然后触发B某个函数
不客气的！如果要进入页面自动触发的话，一般放在 onMounted 里调用就可以了，如果需要更早执行的话，可以放在 onBeforeMount 或者直接在 setup 阶段就运行，可以参考组件的生命周期那一部分内容
onMounted 这只有在第一次进去的时候触发。后台管理系统，正常打开了A/B/C三个标签页面生命周期会自动触发setup。我想实现的是，例如B有个函数是function do(){}，我想在A点击某个按钮，携带参数，push 到 B的时候，B能监听到，然后执行do()。 watch router 又是全局，不太适合我。
可以 watch 那个参数来触发，或者使用 watchEffect 传入你那个函数，我最近刚好更新了数据监听部分的内容，看看是否能解决你的这个问题

我在A页面用了watch监听了当前路由的query，得到参数，是能解决问题。但是我点击B/C页面,A页面的的监听参数query也跟着执行。假如我ABC三个页面都写watch，就乱套了。我看看你这个文章

chengpeiquan · 2022-04-12T03:52:10Z

@chengpeiquan
@chengpeiquan
@chengpeiquan

请问下，在里面设置onBeforeRouteUpdate，切换路由进来的时候无法生效，是咋回事呢。onBeforeRouteLeave在离开的时候是生效的谢谢

需要在同一个路由才会触发这个钩子，比如：当前在页面 /detail/111 ，通过点击 router-link 访问 /detail/222
<template>
  <router-link to="/detail/222">只是更换不同的 params</router-link>
</template>
这样同一个路由，只是更新了 route.params.id ，组件处于被复用的状态，这样会触发 update 钩子
非常感谢。刚刚路上也搜了下这。那在请问下，有没有什么可以在进来的时候触发。从A点击，push B，然后触发B某个函数
不客气的！如果要进入页面自动触发的话，一般放在 onMounted 里调用就可以了，如果需要更早执行的话，可以放在 onBeforeMount 或者直接在 setup 阶段就运行，可以参考组件的生命周期那一部分内容
onMounted 这只有在第一次进去的时候触发。后台管理系统，正常打开了A/B/C三个标签页面生命周期会自动触发setup。我想实现的是，例如B有个函数是function do(){}，我想在A点击某个按钮，携带参数，push 到 B的时候，B能监听到，然后执行do()。 watch router 又是全局，不太适合我。
可以 watch 那个参数来触发，或者使用 watchEffect 传入你那个函数，我最近刚好更新了数据监听部分的内容，看看是否能解决你的这个问题
我在A页面用了watch监听了当前路由的query，得到参数，是能解决问题。但是我点击B/C页面,A页面的的监听参数query也跟着执行。假如我ABC三个页面都写watch，就乱套了。我看看你这个文章

如果还是解决不了的话，可以建个仓库，弄个最小 DEMO 把这个问题复现一下（不涉及你们业务的 DEMO ，只要能复现这个情况就可以），然后我帮你看看~

paynezhuang · 2022-04-12T04:26:19Z

@chengpeiquan
@chengpeiquan
@chengpeiquan
@chengpeiquan

请问下，在里面设置onBeforeRouteUpdate，切换路由进来的时候无法生效，是咋回事呢。onBeforeRouteLeave在离开的时候是生效的谢谢

需要在同一个路由才会触发这个钩子，比如：当前在页面 /detail/111 ，通过点击 router-link 访问 /detail/222
<template>
  <router-link to="/detail/222">只是更换不同的 params</router-link>
</template>
这样同一个路由，只是更新了 route.params.id ，组件处于被复用的状态，这样会触发 update 钩子
非常感谢。刚刚路上也搜了下这。那在请问下，有没有什么可以在进来的时候触发。从A点击，push B，然后触发B某个函数
不客气的！如果要进入页面自动触发的话，一般放在 onMounted 里调用就可以了，如果需要更早执行的话，可以放在 onBeforeMount 或者直接在 setup 阶段就运行，可以参考组件的生命周期那一部分内容
onMounted 这只有在第一次进去的时候触发。后台管理系统，正常打开了A/B/C三个标签页面生命周期会自动触发setup。我想实现的是，例如B有个函数是function do(){}，我想在A点击某个按钮，携带参数，push 到 B的时候，B能监听到，然后执行do()。 watch router 又是全局，不太适合我。
可以 watch 那个参数来触发，或者使用 watchEffect 传入你那个函数，我最近刚好更新了数据监听部分的内容，看看是否能解决你的这个问题
我在A页面用了watch监听了当前路由的query，得到参数，是能解决问题。但是我点击B/C页面,A页面的的监听参数query也跟着执行。假如我ABC三个页面都写watch，就乱套了。我看看你这个文章
如果还是解决不了的话，可以建个仓库，弄个最小 DEMO 把这个问题复现一下（不涉及你们业务的 DEMO ，只要能复现这个情况就可以），然后我帮你看看~

谢谢。我刚找到了个钩子 onActivated，好像有点作用，写在了数据组件里面，还在测试看看。实在不行再搞个demo

C-yborg · 2022-08-03T02:22:31Z

读此vue3入门指南有感：以后会有react入门指南嘛😂

EndlessShw · 2023-03-11T15:53:13Z

你好作者大大，我用 @vue/cli 创建的项目，在使用别名时，报了：

Invalid options in vue.config.js: "resolve" is not allowed

我的 vue.config.js 内容如下：

const { defineConfig } = require("@vue/cli-service");
const {resolve } = require('path')
module.exports = defineConfig({
  transpileDependencies: true, 
  resolve: {
    alias: {
      '@':  resolve("src"), // 源码根目录
      "@cp": resolve("src/components"), // 公共组件
      "@img": resolve("src/assets/img"), // 图片
      "@less": resolve("src/assets/less"), // 预处理器
      "@libs": resolve("src/libs"), // 本地库
      "@plugins": resolve("src/plugins"), // 本地插件
      "@views": resolve("src/views"), // 路由组件
    },
  },
});

tsconfig.json 内容如下：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "useDefineForClassFields": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": ["webpack-env"],
    "paths": {
      "@/*": ["src/*"],
      "@img/*": ["src/assets/img/*"],
      "@less/*": ["src/assets/less/*"],
      "@libs/*": ["src/libs/*"],
      "@plugins/*": ["src/plugins/*"],
      "@cp/*": ["src/components/*"],
      "@views/*": ["src/views/*"]
    },
    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": ["node_modules"]
}

网上尝试了一些方法：
例如：https://blog.csdn.net/weixin_43900414/article/details/119964127

const path = require('path')
const webpack = require('webpack')

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

可是依旧没有解决问题，请问我该如何下手呢？

chengpeiquan · 2023-03-11T16:33:33Z

Invalid options in vue.config.js: "resolve" is not allowed

Vue CLI 要基于 Webpack 去添加别名，看了下官网居然没有这方面的例子 -0- 我之前的 CLI 项目是这样配置的：

使用 configureWebpack 添加 Webpack 的配置选项：

const { resolve } = require('path')
const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    resolve: {
      alias: {
        '@': resolve(__dirname, 'src'),
        '@cp': resolve(__dirname, 'src/components'),
      },
    },
  },
})

或者使用 chainWebpack 去添加链式调用：

// vue.config.js
const { resolve } = require('path')
const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
  transpileDependencies: true,
  chainWebpack: (config) => {
    config.resolve.alias
      .set('@', resolve(__dirname, 'src'))
      .set('@cp', resolve(__dirname, 'src/components'))
      .end()
  },
})

也可以导入 path ，自己封装 resolve 方法，就可以减少每次都写入 __dirname 了：

const path = require('path')
const { defineConfig } = require('@vue/cli-service')

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

module.exports = defineConfig({
  transpileDependencies: true,
  chainWebpack: (config) => {
    config.resolve.alias
      .set('@', resolve('src'))
      .set('@cp', resolve('src/components'))
      .end()
  },
})

这里的操作都是基于底层的 Webpack 的功能， CLI 官网只提供了如何调用 Webpack ，缺少更多的常用用例，可以到 Webpack 官网了解更多的配置说明：

不过现在不推荐使用 Vue CLI 了，一个是项目配置对新人真的不友好，另外是这个脚手架已经不再维护了，官网都推荐使用 Vite ，如果没有技术债的情况下，建议用 Vite 来开坑新项目， Vite 的配置真的超友好！

EndlessShw · 2023-03-12T01:26:38Z

@chengpeiquan

Invalid options in vue.config.js: "resolve" is not allowed

Vue CLI 要基于 Webpack 去添加别名，看了下官网居然没有这方面的例子 -0- 我之前的 CLI 项目是这样配置的：

使用 configureWebpack 添加 Webpack 的配置选项：
const { resolve } = require('path')
const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    resolve: {
      alias: {
        '@': resolve(__dirname, 'src'),
        '@cp': resolve(__dirname, 'src/components'),
      },
    },
  },
})
或者使用 chainWebpack 去添加链式调用：
// vue.config.js
const { resolve } = require('path')
const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
  transpileDependencies: true,
  chainWebpack: (config) => {
    config.resolve.alias
      .set('@', resolve(__dirname, 'src'))
      .set('@cp', resolve(__dirname, 'src/components'))
      .end()
  },
})
也可以导入 path ，自己封装 resolve 方法，就可以减少每次都写入 __dirname 了：
const path = require('path')
const { defineConfig } = require('@vue/cli-service')

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

module.exports = defineConfig({
  transpileDependencies: true,
  chainWebpack: (config) => {
    config.resolve.alias
      .set('@', resolve('src'))
      .set('@cp', resolve('src/components'))
      .end()
  },
})
这里的操作都是基于底层的 Webpack 的功能， CLI 官网只提供了如何调用 Webpack ，缺少更多的常用用例，可以到 Webpack 官网了解更多的配置说明：

官网

中文翻译

不过现在不推荐使用 Vue CLI 了，一个是项目配置对新人真的不友好，另外是这个脚手架已经不再维护了，官网都推荐使用 Vite ，如果没有技术债的情况下，建议用 Vite 来开坑新项目， Vite 的配置真的超友好！

好的，谢谢作者大大。之前看别人的教学跟着装了一套 vue ui，因此现在顺手就接着用了。我会尝试使用 vite 的！

3biubiu · 2023-03-15T07:30:40Z

捉个虫:
文"章"会变得非常长

在路由树配置里发现的错字

chengpeiquan · 2023-04-04T16:00:15Z

捉个虫: 文"章"会变得非常长

在路由树配置里发现的错字

那天太忙居然回头就忘记了，应该是“文件”哈哈哈，已更正，谢谢！

yibaoch · 2023-04-20T07:02:58Z

我觉得作者这个文档很详细感谢

3biubiu · 2023-04-20T07:05:42Z

我觉得作者这个文档很详细感谢

司令你好

yibaoch · 2023-04-24T09:12:47Z

不驾驶eva就滚回去😡

sean-lgt · 2023-07-17T03:14:59Z

内容：routes 是路由树的配置，当的路由很多的时候可以集中到 routes.ts 管理。
语句错误：“当的路由” 这里是不是多了个 “的”？

chengpeiquan · 2023-07-17T14:19:28Z

内容：routes 是路由树的配置，当的路由很多的时候可以集中到 routes.ts 管理。语句错误：“当的路由” 这里是不是多了个 “的”？

之前替换人称代词的时候遗漏处理的地方，已更正，谢谢！

tqsq2005 · 2024-08-29T08:49:30Z

文章写的非常精彩，受益良多，谢谢谢谢！

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Comments on the router page #47

Comments on the router page #47

chengpeiquan commented Jan 15, 2021

TransMux commented Apr 6, 2022

chengpeiquan commented Apr 6, 2022

paynezhuang commented Apr 11, 2022

chengpeiquan commented Apr 11, 2022

paynezhuang commented Apr 12, 2022

chengpeiquan commented Apr 12, 2022

paynezhuang commented Apr 12, 2022

chengpeiquan commented Apr 12, 2022

paynezhuang commented Apr 12, 2022

chengpeiquan commented Apr 12, 2022

paynezhuang commented Apr 12, 2022

C-yborg commented Aug 3, 2022

EndlessShw commented Mar 11, 2023

chengpeiquan commented Mar 11, 2023

EndlessShw commented Mar 12, 2023

3biubiu commented Mar 15, 2023

chengpeiquan commented Apr 4, 2023

yibaoch commented Apr 20, 2023

3biubiu commented Apr 20, 2023

yibaoch commented Apr 24, 2023

sean-lgt commented Jul 17, 2023

chengpeiquan commented Jul 17, 2023

tqsq2005 commented Aug 29, 2024