作为我的QuasarApp的一部分,我有以下路线:
import { RouteRecordRaw} from 'vue-router'
import { uid } from 'quasar'
const routes: RouteRecordRaw[] = [
{
path: '/',
redirect: () => {
console.log('matched /')
return {path: `/${uid()}`}
}
},
{
path: '/:uuid',
component: () => import('pages/User.vue')
// component: User,
},
];
export default routes;
to当to
/
时工作正常:将URL更改为
/73a219e5-2cf2-4dd0-8...
,并且执行了(特别是内部有一个基于User.vue
参数的数据,该fetch
在其中检索了一些数据。
如果我从组件内强迫路线(例如
:uuid
),via
User.vue
我确实看到URL更改为新的UUID,但没有执行
import { useRouter } from 'vue-router'
const router = useRouter()
router.push('/')
。具体而言,提到User.vue
没有反应性的参考。
是这种正常的(=我必须寻找触发方法),还是我身边有滥用(错误用途)?
问题的核心是您使用相同的组件来渲染您要导航的页面
from和您正在导航的页面。
通过设计,VUE优化了DOM渲染,并将重复使用现有的组件实例。这意味着在更改路线时不会触发某些钩子(例如:
route.params.uuid
const route = useRoute()
等)。
在路由更改时,强迫创建不同的组件实例,请使用当前路由的mounted
用作created
:.fullPath
:
key