javascript - vue动态路由问题？

Question

内置了一个组件，想每次打开都用一个新路由打开，但是显示不出来

this.$router.options.routes[0].children.push({// 插入路由                      title:`${query.data.name}`,                      path: '/view',                      name: 'view',                      meta:{title: `${query.data.name}`,  keepAlive: true},                      component: resolve => require(['../view/index.vue'], resolve)// 将组件用require引进来                    })this.$router.addRoutes(this.$router.options.routes)this.$router.push({ path:'/view',query:{item:item}})

Answer 1

从你提供的信息来看，你正在尝试在 Vue.js 中动态添加路由，并希望每次添加新路由时能够以新路由打开。但从你给出的截图来看，似乎并没有成功。

首先，我们需要确认一下你的 this.$router 对象是否已经初始化并正确配置了路由。如果没有，你需要先初始化它。

如果你使用的是 Vue Router，那么在 Vue 3 中，你需要这样初始化它：

import { createRouter, createWebHistory } from 'vue-router'const router = createRouter({  history: createWebHistory(),  routes: [], // 你的路由列表})export default router

然后，你可以在你的主程序中导入这个 router，并将其添加到你的 Vue 实例中：

import router from './router'new Vue({  router,  render: h => h(App),}).$mount('#app')

现在，我们来解决你的问题。你似乎是在尝试动态添加一个新的路由。在 Vue Router 中，你可以使用 addRoutes 方法来添加新的路由。这个方法应该这样使用：

router.addRoutes([  {    title:`${query.data.name}`,    path: '/view',    name: 'view',    meta:{title: `${query.data.name}`,  keepAlive: true},    component: resolve => require(['../view/index.vue'], resolve)// 将组件用require引进来  }])

请注意，你需要将新的路由作为一个数组传递给 addRoutes 方法。每个路由对象都应该有一个 path 属性来定义其路径，以及一个 component 属性来定义其要使用的组件。你可以使用 require 或 import 来导入你的组件。

最后，当你添加了新的路由后，你需要使用 $router.push 方法来导航到新的路由：

this.$router.push({ path:'/view',query:{item:item}})

希望这些信息能够帮助你解决问题。如果你还有其他问题，欢迎随时向我提问。