Em đang có 1 router lồng như thế này:

  {
    path: '/recruit',
    name: 'Recruit',
    component: () => import(/* webpackChunkName: "Recruit" */ '../views/Recruit/index.vue'),
    children: [
      {
          path: "/recruit/:locale",
          component: () => import(/* webpackChunkName: "Recruit" */ '../views/Recruit/index.vue'),
      },
  ],
  },

Khi em click và đổi locale params của trang web thành: localhost:8080/en và em muốn khi click chuyển qua 1 trang khác bất kỳ thì nó vẫn giữ được locale params ví dụ qua trang recruit thì nó có đường dẫn là localhost:8080/recruit/en, đây là router link mà em đang sử dụng:

 <router-link
                class="nav-link rttr"
                :to="{ name: 'Recruit'}"
              >
                Tuyển dụng
              </router-link>

Nếu em tách router trên thành 2 router riêng thì chỉ có thằng recruit/:locale là hoạt động còn khi bên trang chủ chưa có local params thì nó vẫn dẫn đến trang /recruit nhưng giao diện vẫn nằm ở trang chủ, và ngược lại khi em dùng router lồng thì không thể lấy được router params từ trang chủ qua các trang khác. Cảm ơn mọi người đã bỏ chút thời gian đọc bài, mong nhận được sự giúp đỡ từ mọi người.

Code 2 component ở trang chủ là header + Fearute:

Header.vue:

<template>
  <div id="header-top" class="header-top sticky-top">
    <nav class="navbar navbar-expand-lg navbar-light">
      <a class="navbar-brand" href="/">
        <img src="../assets/home/logo.svg" alt="" id="logo"
      /></a>
      <button
        class="navbar-toggler"
        id="btn-navbar"
        type="button"
        data-toggle="collapse"
        data-target="#navbarNavDropdown"
        aria-controls="navbarNavDropdown"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span class=""
          ><img
            src="../assets/home/align-right-svgrepo-com.svg"
            alt="GoStream Tech"
        /></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav" id="menu">
          <div class="list-nav-item">
            <li>
              <a
                @click="active = null"
                :class="{ active: active === null }"
                href="/"
                class="nav-link"
                >{{ localised("home") }}</a
              >
            </li>
            <li class="nav-item">
              <a
                @click="active = 'about'"
                :class="{ active: active === 'about' }"
                href="#about"
                class="nav-link"
                >{{ localised("about") }}</a
              >
            </li>
            <li class="nav-item">
              <a
                @click="active = 'newspaper'"
                :class="{ active: active === 'newspaper' }"
                href="#Newspaper"
                class="nav-link"
                >{{ localised("newspaper") }}</a
              >
            </li>
            <li class="nav-item">
              <!-- <a class="nav-link rttr"  @click="recruitClick">
                
              {{ localised("recruit") }}</a> -->
              <router-link
                class="nav-link rttr"
                :to="{ name: 'Recruit'}"
              >
                {{ localised("recruit") }}
              </router-link>
            </li>
            <li class="nav-item">
              <a
                @click="active = 'contact'"
                :class="{ active: active === 'contact' }"
                href="#contact"
                class="nav-link"
                >{{ localised("contact") }}</a
              >
            </li>
          </div>

          <li class="nav-item dropdown" id="language">
            <a
              class="nav-link"
              href="#"
              id="navbarDropdownMenuLink"
              role="button"
              data-toggle="dropdown"
              aria-expanded="false"
            >
              <img :src="flag" alt="" />
              <b>{{ nation }}</b>
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
              <a class="language-Viet row" href="/vi">
                <div class="language-popup">
                  <img src="../assets/home/image 18.svg" @click="changeLanguage(1)" alt="" />
                  <b value="vi" >Tiếng Việt</b>
                </div>
              </a>
              <a class="language-English row" href="/en">
                <div class="language-popup">
                  <img src="../assets/home/image 19.svg" alt="" />
                  <b value="en">English</b>
                </div>
              </a>
            </div>
          </li>
        </ul>
      </div>
    </nav>
  </div>
</template>

<script>
import "../assets/style.css";
import "../assets/boostrap.css";
import "../views/Home/NewsPaper.vue";
export default {
  data() {
    return {
      active: null,
      activeLocale: "vi",
      dosomething:'',
      menu: {
        en: {
          home: "Home",
          about: "About",
          newspaper: "Newspaper",
          recruit: "Recruit",
          contact: "Contact",
        },
        vi: {
          home: "Trang chủ",
          about: "Về chúng tôi",
          newspaper: "Tin tức",
          recruit: "Tuyển dụng",
          contact: "Liên hệ",
        },
      },
    };
  },
  mounted() {
    if (this.$route.params.locale == null) {
      this.activeLocale = "vi";
    } else {
      this.activeLocale = this.$route.params.locale;
    }

    //test case label multiple language
    // var localeGS = this.$route.params.locale
    // switch(localeGS){
    //   case null:{
    //       return this.dosomething = 'VN'
    //   }
    //   case 'vi':{
    //     return this.dosomething = 'VN'
    //   }
    //   case 'en':{
    //     return this.dosomething = 'EN'
    //   }

    // }
  },
  methods: {
 changeLanguage(language) {
    // set ngôn ngữ với key là currentLanguage
    localStorage.currentLanguage = language;
  },
    localised(key) {
      return this.menu[this.activeLocale][key];
    },
  },
  computed: {
    locale() {
      return this.$route.params.locale;
    },

nation() {
  if (this.$route.params.locale === 'en') {
    return 'EN'
  }
  else{
    return 'VN'
  }
},
    flag() {
      if (this.$route.params.locale == "vi") {
        return require("../assets/home/image 18.svg");
      }
       if (this.$route.params.locale == null) {
        return require("../assets/home/image 18.svg");
    }
    if(this.$route.params.locale == 'en'){
       return require("../assets/home/image 19.svg");
    }
    },
  },
};
</script>

<style>
</style>

Feature.vue:

<template>
  <div  class="container feature">
    <div class="logo-feature">
      <div class="feature-detail">
        <img class="feature-avt" src="../assets/home/logo.svg" alt="" />
        <div class="btn-feature">
          <a href="">
            <img src="../assets/home/circle.svg" alt="" />
            <img class="go-feature" src="../assets/home/go-r.svg" alt=""
          /></a>
        </div>
      </div>
      <div class="feature-detail">
        <img class="feature-avt" src="../assets/home/gostudio.png" alt="" />

        <div class="btn-feature">
          <a href="">
            <img src="../assets/home/circle.svg" alt="" />
            <img class="go-feature" src="../assets/home/go-r.svg" alt=""
          /></a>
        </div>
      </div>
      <div class="feature-detail">
        <img class="feature-avt" src="../assets/home/image 32x.png" alt="" />
        <div class="btn-feature">
          <a href="">
            <img src="../assets/home/circle.svg" alt="" />
            <img class="go-feature" src="../assets/home/go-r.svg" alt=""
          /></a>
        </div>
      </div>
      <div class="feature-detail">
        <img class="feature-avt" src="../assets/home/image 112x.png" alt="" />
        <div class="btn-feature">
          <a href="">
            <img src="../assets/home/circle.svg" alt="" />
            <img class="go-feature" src="../assets/home/go-r.svg" alt=""
          /></a>
        </div>
      </div>
    </div>
    <div id="about" v-for="(item, index) in abouts" :key="index">
      <div class="intro">
        <img src="../assets/home/building-1.png" alt="" />
        <h5>{{ item.firsTitle }}</h5>
        <h2>{{ item.titleProduct }}</h2>
        <h3>{{ item.nameProduct }}</h3>
        <h6>{{ item.firsContent }}</h6>
      </div>
      <div class="livestream">
        <div class="livestream-img">
          <img :src="`https://cms.gstech.space${item.imageAbout.url}`" alt="" />
        </div>
        <div class="livestream-intro">
          <h5>{{ item.titleAbout }}</h5>
          <h6>{{ item.descriptionAbout }}</h6>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      abouts: [],
    };
  },
  created() {},
  async mounted() {
    if (this.$route.params.locale == null) {
      await axios
        .get(`https://cms.gstech.space/abouts`)
        .then((response) => {
          this.abouts = response.data;
          console.log("ABoout", response.data);
        })
        .catch((e) => {
          this.errors.push(e);
        });
    } else {
      await axios
        .get(`https://cms.gstech.space/abouts?_locale=${this.locale}`)
        .then((response) => {
          this.abouts = response.data;
        })
        .catch((e) => {
          this.errors.push(e);
        });
    }
  },
  computed: {
    locale() {
      return this.$route.params.locale;
    },
  },
};
</script>

<style>
body,
html {
  scroll-behavior: smooth;
}
.btn-feature {
  width: 35px;
  height: 35px;
  position: relative;
  top: 55px;
  right: 112px;
  align-items: center;
  text-align: center;
  justify-content: center;
  display: flex;
}
@keyframes example {
  0% {
    transform: translateX(-60%);
  }
  100% {
    transform: translateX(30%);
  }
}

.go-feature {
  position: relative !important;
  /* margin: 0 auto; */
  /* justify-content: center; */
  /* right: -33px; */
  top: 10px;
  left: 16px !important;
}
.btn-feature:hover .go-feature {
  animation-name: example;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  margin-top: 10px;
  /* left: 0;
    top: 0px;
    margin: 0 auto; */
}
</style>