vue3.x路由跳转useRouter执行后undefined问题 setup

在使用 `Vue.extend` 创建的弹窗组件中，路由跳转失效的问题通常与 Vue Router 的依赖注入机制和组件上下文有关。当通过 `Vue.extend` 动态创建组件时，该组件默认不会继承当前 Vue 实例的 `$router` 属性，导致 `<router-link>` 或编程式导航（如 `this.$router.push`）无法正常工作。 ### 依赖注入缺失 Vue Router 通过依赖注入机制将 `$router` 提供给所有子组件。然而，使用 `Vue.extend` 创建的组件并不会自动继承父级上下文中的注入值。因此，在这些组件内部调用 `this.$router` 会返回 `undefined`，从而导致导航失败。为解决这一问题，可以在创建组件时手动将 `$router` 作为属性传入： ```javascript const PopupComponent = Vue.extend({ template: ` <div> <router-link to="/target">跳转到目标页</router-link> </div> `, props: [&#39;router&#39;] // 显式声明 router prop }) new PopupComponent({ propsData: { router: new Vue({ router }).$router } }).$mount(&#39;#popup-container&#39;) ``` 上述方式确保了弹窗组件能够访问到 `$router` 实例，从而支持 `<router-link>` 和 `this.$router.push` 等操作[^1]。 ### 使用 Composition API 获取 $router 若项目基于 Vue 3 并采用 Composition API，则可以使用 `useRouter()` 函数获取 `$router` 实例。即使组件是通过 `Vue.extend` 创建的，只要其处于 Vue 应用实例的作用域内，`useRouter()` 仍能正确解析 `$router`： ```vue <script setup> import { useRouter } from &#39;vue-router&#39; const router = useRouter() function navigateToTarget() { router.push(&#39;/target&#39;) } </script> <template> <button @click="navigateToTarget">跳转到目标页</button> </template> ``` 这种方式避免了手动传递 `$router` 的复杂性，并提升了代码的可维护性[^1]。 ### 避免路由路径冲突 在某些场景下，弹窗组件可能包含动态路由参数（如 `/user/:id`），此时需要确保路由配置中已启用 `props` 选项，以便将 `$route.params` 自动映射为组件的 props： ```javascript const router = new VueRouter({ routes: [ { path: &#39;/user/:id&#39;, component: UserComponent, props: true // 启用 props 传递 } ] }) ``` 这样，即使弹窗组件涉及动态路径，也能正确接收路由参数并进行导航控制[^1]。 ### 处理嵌套路由与相对路径 如果弹窗组件中涉及嵌套路由或相对路径跳转，应使用 `append` 模式以确保路径拼接逻辑正确。例如，在当前路径 `/user/123` 下点击链接 `<router-link to="edit" append>` 会导航至 `/user/123/edit`，而不是直接替换路径： ```vue <router-link to="edit" append>编辑资料</router-link> ``` 此方式适用于构建具有层级结构的弹窗内容，同时保持 URL 的语义一致性[^2]。 --- ###