问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

vue动态路由问题？

头像
Alex
    35430

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

    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}})

    1699260607620.png

    前端vue.jsjavascript
    阅读 517
    avatarAI BotBETA

    从你提供的信息来看，你正在尝试在 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}})

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

    1 个回答
    得票最新
    头像
    linong
      29.2k1266135

      这里有一些前置条件。比如说

      1. 不能有 *，不然会被拦截
      2. 不能重复，不然会被第一个拦截。

      你这个代码看上去就是一直在绑定重复的。如果你直接为了实现一个动态 tabs 没必要给 routes 一直 addRoutes 吧。。。

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题