Question

我正在尝试使查询语言成为可选功能。用户去哪里

localhost /＃/，它将重定向到localhost /＃/？lang = en（默认为英语），并在此过程中更改站点的语言。

如果用户转到/ localhost /＃/？lang = es，它将以西班牙文显示主页，如果用户从那里转到其他任何路径，它将把？lang = es跟踪到所有页面。 / p>

这是我目前拥有的，但是不能完全正常工作： ` 我的路由器：

此代码

    router.beforeEach((to, from, next) => {
  let lang = from.query.lang;

     //Changing language 
     i18n.locale = lang || 'en';

  //This now should redirect
  if(!lang){
    lang = 'en';
    console.log('Trying to push path: '+to.path+'/?lang='+lang)

    next({ path: `${to.path}/?lang=${lang}` });
    return; 
  }

产生

尝试推动路径：////////////////////////////////////////// ///////////////////////////////////////////////////// ///////////////////////////////////////////////////// ///////////////////////////////////////////////////// ///////////////////////////////////////////////////// //////////////////////////////////////////////////// ///////////////////////////////////////////////////// ///////////////////////////////////////////////////// ///////////////////////////////////////////////////// ///////////////////////////////////////////////////// ///////////////////////////////////////////////////// ///////////////////////////////////////////////////// ///////////////////////////////////////////////////// ///////////////////////////////////////////////////// ///////////////////////////////////////////////////// ///////////////////////////////////////////////////// //////////////////////////////////////////////////// //////////////////////////////////////////////////// //////////////////////////////////////////////////// ？lang = en vue-router.esm.js？8c4f：1905 RangeError：超出了最大调用堆栈大小

Answer 1

如果要重定向到路由器防护内部的另一条路由，则需要使用新参数调用next（）。

请参见https://router.vuejs.org/guide/advanced/navigation-guards.html#global-guards

特别是：

Blockquote next（'/'）或next（{path：'/'}）：重定向到其他位置。当前导航将被中止，并且将开始新的导航。您可以将任何位置对象传递给next，这允许您指定诸如replace：true，name：'home'之类的选项以及在router-link的prop或router.push
中使用的任何选项。

是这样的：

router.beforeEach((to, from, next) => {
  let lang = from.query.lang;
  //Changing language 
  i18n.locale = lang || 'en';

  //This now should redirect
  if(!lang){
    console.log('Trying to push path: '+to.path+'/?lang='+lang)
    next({ path: `${to.path}/?lang=${lang}` });
    return; // this is needed just to make sure code below this get
  }

希望这会有所帮助。

VUE尾随路径查询

1 个答案: