Vue路由器尝试使用params作为名称来匹配路由

hwamh0ep 于 2023-08-07 发布在 Vue.js

关注(0)|答案(2)|浏览(175)

我试图在我的路线中使用参数，并创建了下面的路线。

export const ConsumerRoutes = [
  {
    path: '/' + import.meta.env.VITE_MODULE_ADMIN_NAME + '/consumers',
    meta: { 
      requiresAuth: true,
      adminLayout: true,
      module: 'admin',
      icon: UserCircleIcon,
      nav: 'Consumers'
    },
    children: [
      {
        path: '',
        name: 'Consumers',
        component: () => import('../../views/admin/Consumer.vue'),
      },
      {
        path: ':id',
        name: 'Consumer Details',
        component: () => import('../../views/admin/ConsumerDetails.vue'),
      }
    ],
  },

  // {
  //   path: '/' + import.meta.env.VITE_MODULE_ADMIN_NAME + '/consumers/:id',
  //   meta: { 
  //     requiresAuth: true,
  //     adminLayout: true,
  //     module: 'admin',
  //     excludeFromNav: true
  //   },
  //   children: [
  //     {
  //       path: '',
  //       name: 'Consumer Details',
  //       component: () => import('../../views/admin/ConsumerDetails.vue'),
  //     }
  //   ]
  // }
];

字符串
我可以导航到消费者，但只要我把/1的网址，我得到这个错误

vue-router.mjs:810 Uncaught (in promise) Error: No match for
 {"name":"1","params":{}}

型
但是如果我在afterEach函数中console.log我的路由，我得到这个route object
所以它知道我试图去哪条路线，但由于某种原因，它正在使用'1'来尝试并找到一条名为'1'的路线。如果我将路由的名称更改为1，则加载正常。
我试过把我的路线从孩子们那里分开，成为单独的路线，但这并没有改变任何事情
解决了它，它与我定义的路线无关

vue.js

来源：https://stackoverflow.com/questions/76693702/vue-router-trying-to-use-params-as-the-name-to-match-route

2条答案

按热度按时间

vojdkbi01#

您遇到的问题可能是由于Vue Router试图通过名称而不是路径来匹配路由。
您尝试导航到/consumers/1，打算将“1”作为路由参数（：id）。但是Vue Router将“1”解释为路由名称，因此您看到的错误消息。
请确保使用路由路径而不是路由名称进行导航。在afterEach钩子中，用途：

router.afterEach((to, from) => {
  router.push(to.path);
});

字符串
手动导航时，请使用路径（'/consumers/1'），而不是名称。如果你仍然有问题，可能是由于你的代码的另一部分。
以下是如何通过路径名称导航到路径：

router.push({ name: 'Consumer Details', params: { id: 1 } })

型
下面是如何通过路径导航到路线：

router.push('/consumers/1')

型
希望这对你有帮助！

赞(0）回复(0）举报 2023-08-07

ogq8wdun2#

Demo 

 <li v-for="article in articles" @click="getDescribe(article.id)">

scheme 1
      {
       path: '/describe/:id',
       name: 'Describe',
       component: Describe
      }

      getDescribe(id) {
        this.$router.push({
          path: `/describe/${id}`,
      })

    this.$route.params.id

scheme 2

  {
     path: '/describe',
     name: 'Describe',
     component: Describe
   }

   this.$router.push({
          name: 'Describe',
          params: {
            id: id
          }
   })

   this.$route.params.id

scheme 3
  
       this.$router.push({
          path: '/describe',
          query: {
            id: id
          }
        })

   {
     path: '/describe',
     name: 'Describe',
     component: Describe
   }
   
this.$route.query.id

字符串

赞(0）回复(0）举报 2023-08-07

我来回答

Vue路由器尝试使用params作为名称来匹配路由

2条答案

相关问题

热门标签

最新问答