Comments on the router page about learning-vue3

[yibaoch]

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

[chengpeiquan]

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

谢谢你的称赞！感动！

[3biubiu]

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

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

[InEase]

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

[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 的配置真的超友好！

[3biubiu]

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

司令你好

[paynezhuang]

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

[chengpeiquan]

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

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

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

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

[paynezhuang]

@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]

@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]

@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]

@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]

@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]

@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]

@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]

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

[EndlessShw]

你好作者大大，我用 @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)
}

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

[EndlessShw]

@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 的！

[chengpeiquan]

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

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

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

[yibaoch]

不驾驶eva就滚回去😡

[sean-lgt]

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

[chengpeiquan]

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

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