第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

Vue 路由器無法識別 :lang 作為參數(shù)

Vue 路由器無法識別 :lang 作為參數(shù)

HUH函數(shù) 2022-10-21 14:59:21
我有以下代碼:import Router from 'vue-router';let mainRoutes = [    {path: '/first', component: () => import('./pages/First')},        {path: '/second', component: () => import('./pages/Second')},        {path: '/third', component: () => import('./pages/Third')},  ];const router = new Router({  mode: 'history',  base: process.env.BASE_URL,  scrollBehavior() {    return {x: 0, y: 0}  },  routes: [    {        path: '/:lang',        component: () => import('./layouts/Main'),        children: mainRoutes,        meta: {requiresAuth: true, permissions: true}    },    {        path: '*',        component: () => import('@/pages/errors/404')    }  ]})router.beforeEach((to, from, next) => {    if (!to.query.lang) {        to.query.lang= 'ru';        next({ path: to.path, query: to.query });      } else {        next();      }});export default router我想要的是:每次輸入某些路由時,我都希望 vue-router 檢查它是否具有 lang 參數(shù)。如果不是,我希望它在其中放置“ru”,如果是,則繼續(xù)并顯示具有必要語言的頁面(i18n 負責的部分)。問題是由于某種原因它不能將 ':lang' 識別為子路由的參數(shù),所以如果我嘗試轉(zhuǎn)到 'test.test/ru',它會返回 lang 參數(shù),但如果我嘗試'test.test/ru/first' 它沒有看到它并返回 404。萬一我把 :lang 參數(shù)放在每個子組件之前,一切正常,但這并不實用。有沒有更好的方法來解決這個問題?
查看完整描述

2 回答

?
當年話下

TA貢獻1890條經(jīng)驗 獲得超9個贊

使用這樣的代碼,您應該得到您想要的效果。


import Vue from 'vue';

import VueI18n from 'vue-i18n';

import VueRouter from 'vue-router';

import Router from './Router.vue';

import En from './translation/En.vue';

import Ru from './translation/Ru.vue';


Vue.use(VueI18n);

Vue.use(VueRouter);

Vue.use(VueBus);


const messages = {

  en: En,

  ru: Ru,

};


const i18n = new VueI18n({

  fallbackLocale: 'ru',

  locale: 'ru',

  messages,

});


const router = new VueRouter({

  mode: 'history',

  base: process.env.BASE_URL,

  routes: [

    {

      path: '/:lang',

      component: {

        render: (h) => h('router-view'),

      },

      children: [your children route],

});


router.beforeEach((to, from, next) => {

  const { lang } = to.params;


  if (!['en', 'fr'].includes(lang)) {

    return next(i18n.locale);

  }


  if (i18n.locale !== lang) {

    i18n.locale = lang;

  }


  return next();

});

我不確定但沒有 i18n 我認為是這樣的:


...

router.beforeEach((to, from, next) => {

 const { lang } = to.params;


 if (!['en', 'ru'].includes(lang)) {

  route.params.lang = 'ru';

  router.push({ name: route.name });

 }

});


查看完整回答
反對 回復 2022-10-21
?
12345678_0001

TA貢獻1802條經(jīng)驗 獲得超5個贊

我終于找到了解決辦法!


如果您在主路線中有一些參數(shù),您的子路線不應以“/”符號開頭,而應以正確的路線開頭,例如


let mainRoutes = [

    {path: 'first', component: () => import('./pages/First')},

    

    {path: 'second', component: () => import('./pages/Second')},

    

    {path: 'third', component: () => import('./pages/Third')},

  

];


const router = new Router({

  mode: 'history',

  base: process.env.BASE_URL,

  scrollBehavior() {

    return {x: 0, y: 0}

  },


  routes: [

    {

        path: '/:lang',

        component: () => import('./layouts/Main'),


        children: mainRoutes,

        meta: {requiresAuth: true, permissions: true}

    },

  ]

})


查看完整回答
反對 回復 2022-10-21
  • 2 回答
  • 0 關注
  • 116 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網(wǎng)微信公眾號