learning-vue3
learning-vue3 copied to clipboard
Comments on the router page
~
作者功力深厚!受益良多!非常感谢!
作者功力深厚!受益良多!非常感谢!
谢谢你的称赞!感动!
请问下,在里面设置onBeforeRouteUpdate,切换路由进来的时候无法生效,是咋回事呢。onBeforeRouteLeave在离开的时候是生效的 谢谢
请问下,在里面设置onBeforeRouteUpdate,切换路由进来的时候无法生效,是咋回事呢。onBeforeRouteLeave在离开的时候是生效的 谢谢
需要在同一个路由才会触发这个钩子,比如:当前在页面 /detail/111
,通过点击 router-link
访问 /detail/222
<template>
<router-link to="/detail/222">只是更换不同的 params</router-link>
</template>
这样同一个路由,只是更新了 route.params.id ,组件处于被复用的状态,这样会触发 update 钩子
@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
请问下,在里面设置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
阶段就运行,可以参考组件的生命周期那一部分内容
@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
请问下,在里面设置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 传入你那个函数,我最近刚好更新了 数据监听 部分的内容,看看是否能解决你的这个问题
@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
请问下,在里面设置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 ,只要能复现这个情况就可以),然后我帮你看看~
@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
读此vue3入门指南有感:以后会有react入门指南嘛😂
你好作者大大,我用 @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)
}
可是依旧没有解决问题,请问我该如何下手呢?
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 的配置真的超友好!
@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 的!
捉个虫: 文"章"会变得非常长
在路由树配置里发现的错字
捉个虫: 文"章"会变得非常长
在路由树配置里发现的错字
那天太忙居然回头就忘记了,应该是“文件”哈哈哈,已更正,谢谢!
我觉得作者这个文档很详细 感谢
我觉得作者这个文档很详细 感谢
司令你好
不驾驶eva就滚回去😡
内容:routes 是路由树的配置,当的路由很多的时候可以集中到 routes.ts 管理。 语句错误:“当的路由” 这里是不是多了个 “的”?
内容:routes 是路由树的配置,当的路由很多的时候可以集中到 routes.ts 管理。 语句错误:“当的路由” 这里是不是多了个 “的”?
之前替换人称代词的时候遗漏处理的地方,已更正,谢谢!