AngularJS UI Router：若无语言代码则追加/强制添加语言代码

针对你这种所有路由都依赖languageCode作为首个参数的场景，这里有几种实用的实现方式，结合ui-router的特性来处理无语言代码时的自动追加：

方法1：使用$urlRouterProvider处理直接访问的路径 #

这是最直接的方式，通过配置路由规则，把不带语言代码的请求重定向到带默认语言的路径：

步骤1：保留原有路由配置，添加重定向规则 #

先维持你现有的$stateProvider配置，再通过$urlRouterProvider定义重定向逻辑：

angular.module('yourApp', ['ui.router'])
  .config(function($stateProvider, $urlRouterProvider) {
    // 你的原有state配置
    $stateProvider
      .state('app',{
        url: '/:languageCode',
        templateUrl:'./views/routes/app.html',
        controller:'appController',
        abstract: true,
        // 可选：验证languageCode是否有效，无效则跳转到默认语言
        resolve: {
          validateLanguage: function($stateParams, $state) {
            const validLanguages = ['en', 'fr', 'es']; // 替换成你的有效语言列表
            if (!validLanguages.includes($stateParams.languageCode)) {
              $state.go('app.home', { languageCode: 'en' });
            }
          }
        }
      })
      .state('app.home',{
        url:'/',
        templateUrl:'./views/routes/home.html',
        controller:'homeController',
      })
      .state('app.products', {
        url:'/product',
        abstract: true,
      })
      // ...其他子state配置

    // 处理根路径（/）的重定向
    $urlRouterProvider.when('', '/en');
    $urlRouterProvider.when('/', '/en');

    // 处理所有不带语言代码的子路径（比如/product → /en/product）
    $urlRouterProvider.when(/^\/(?!([a-z]{2})\/).*/, function($match) {
      // 获取默认语言：优先取本地存储的偏好语言，否则用浏览器语言或默认值
      const getDefaultLang = () => {
        const savedLang = localStorage.getItem('preferredLang');
        if (savedLang) return savedLang;
        const browserLang = navigator.language.split('-')[0];
        return ['en','fr','es'].includes(browserLang) ? browserLang : 'en';
      };
      const defaultLang = getDefaultLang();
      const targetPath = $match[0];
      return `/${defaultLang}${targetPath}`;
    });

    // 兜底：未匹配到任何路由时跳转到默认语言首页
    $urlRouterProvider.otherwise('/en');
  });

方法2：全局监听路由跳转事件 #

如果需要更灵活的控制（比如根据用户状态动态调整语言），可以在run阶段监听路由跳转事件，拦截无语言代码的跳转并追加参数：

angular.module('yourApp')
  .run(function($rootScope, $state) {
    // 监听路由跳转开始事件（AngularJS 1.6+推荐用$transitions，这里是兼容旧版本的写法）
    $rootScope.$on('$stateChangeStart', function(event, toState, toParams) {
      // 检查目标路由是否属于app的子路由，且未携带languageCode
      if (toState.name.startsWith('app.') && !toParams.languageCode) {
        event.preventDefault(); // 阻止当前无效跳转
        // 获取默认语言（逻辑同上）
        const defaultLang = localStorage.getItem('preferredLang') || navigator.language.split('-')[0] || 'en';
        // 重新跳转到带语言参数的目标路由
        $state.go(toState.name, { ...toParams, languageCode: defaultLang });
      }

      // 额外：验证languageCode是否有效，无效则替换为默认
      if (toParams.languageCode) {
        const validLangs = ['en','fr','es'];
        if (!validLangs.includes(toParams.languageCode)) {
          event.preventDefault();
          $state.go(toState.name, { ...toParams, languageCode: 'en' });
        }
      }
    });
  });

关键注意点 #

• 语言有效性验证：不管用哪种方法，都建议添加语言代码的有效性检查，避免非法语言参数导致的路由错误。
• 用户偏好优先：可以把用户之前选择的语言存在localStorage里，下次访问时自动使用，提升用户体验。
• 子路由继承：因为app是抽象路由，所有子路由会自动继承languageCode参数，所以跳转子路由时无需重复传递该参数。

内容的提问来源于stack exchange，提问作者Samer Murad