Nuxt SSR 路由问题 - [vue-router] 命名路由定义重复

Question

我无法修复控制台上显示的警告：

这是我的路线/index.js

module.exports = [
    {
        name:'shop-page',
        path: '/sklepy/:id',
        component: 'pages/shop-page.vue'
    },
    {
        name: 'shops',
        path: '/sklepy',
        component: 'pages/shops-list-page.vue'
    },
    {
        name: 'categories',
        path: '/kategorie',
        component: 'pages/category-list-page.vue'
    },
    {
        name: "category-page",
        path: '/kategorie/:id',
        component: 'pages/category-page.vue'
    },
    {
        name: 'rules',
        path: '/regulamin',
        component: 'pages/rules-page.vue'
    },
    {
        name: 'privacy policy',
        path: '/polityka-prywatnosci',
        component: 'pages/privacy-policy-page.vue'
    },
    {
        name: 'new password',
        path: '/new-password',
        component: 'pages/new-password-page.vue'
    },
    {
        name: 'cookies policy',
        path: '/polityka-cookies',
        component: 'pages/cookies-page.vue'
    },
    {
        name: 'email-confirmed',
        path: '/email-confirmed',
        component: 'pages/email-confirmed-page.vue'
    },
]

这是我的 nuxt.config.js

const routes = require('./routes/index.js')

export default {
  css: [
    '@/static/css/styles.css',
  ],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
    { src: "@/plugins/filters.js" },
    { src: "@/plugins/axios.js" }
  ],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    // https://go.nuxtjs.dev/tailwindcss
    '@nuxtjs/tailwindcss',
    '@nuxtjs/composition-api/module'
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
    // https://go.nuxtjs.dev/pwa
    '@nuxtjs/pwa',
    '@nuxtjs/proxy',
    '@nuxtjs/dotenv'
  ],

  // Axios module configuration: https://go.nuxtjs.dev/config-axios
  axios: {
    proxy: true
  },

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
  },
  proxy: {
    '/api/': {
      target: process.env.VUE_APP_ROOT_API,
      pathRewrite: { '^/api': '' }
    }
  },
  router: {
    extendRoutes(nuxtRoutes, resolve) {
      routes.forEach((route) => {
        nuxtRoutes.push({
          name: route.name,
          path: route.path,
          component: resolve(__dirname, route.component)
        })
      })
    }
  }

}

这些问题可能导致当我从 url 重新加载页面时：

http://localhost:3000/shops/4kom

（然后按F5，刷新页面），出现如下：

http://localhost:3000/shop-page

请帮忙。

Answer 1

好的，解决方法是：

name 不能与component 相同。

Answer 2

您不需要在 nuxt.config.js 中循环路由。试试这个。

路由/index.js

  const extendRoutes = (routes, resolve) => {
  routes.push(
     {
    name:'shop-page',
    path: '/sklepy/:id',
    component: 'pages/shop-page.vue'
},
{
    name: 'shops',
    path: '/sklepy',
    component: 'pages/shops-list-page.vue'
},
{
    name: 'categories',
    path: '/kategorie',
    component: 'pages/category-list-page.vue'
},
{
    name: "category-page",
    path: '/kategorie/:id',
    component: 'pages/category-page.vue'
},
{
    name: 'rules',
    path: '/regulamin',
    component: 'pages/rules-page.vue'
},
{
    name: 'privacy policy',
    path: '/polityka-prywatnosci',
    component: 'pages/privacy-policy-page.vue'
},
{
    name: 'new password',
    path: '/new-password',
    component: 'pages/new-password-page.vue'
},
{
    name: 'cookies policy',
    path: '/polityka-cookies',
    component: 'pages/cookies-page.vue'
},
{
    name: 'email-confirmed',
    path: '/email-confirmed',
    component: 'pages/email-confirmed-page.vue'
},
  );
};

export default extendRoutes;

nuxt.config.js

import extendRoutes from "./routes/index.js";

export default { 
 router: {
    extendRoutes
  },
}