Блог

Я не могу исправить предупреждения, отображаемые на консоли:

это мое routes/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

Пожалуйста, помогите.

вам не нужно зацикливать маршруты внутри nuxt.config.js. попробуй это.

routes/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
  },
}
 

Хорошо, решение таково:

то name не может быть таким же, как component .