Question

我在将 i18n 的语言环境附加到页面网址时遇到了麻烦。页面已正确翻译，但我想在网址中添加语言环境。已经尝试了很多方法而没有成功。

我的目标是拥有这样的东西：

example.com/en
example.com/es
example.com/cn
example.com/en/about
example.com/es/about
example.com/cn/about
example.com/en/about/faq
example.com/es/about/faq
example.com/cn/about/faq

router / index.js

const globalMiddleware = ['locale', 'check-auth']

const routeMiddleware = resolveMiddleware(
  require.context('~/middleware', false, /.*\.js$/)
)

const router = createRouter()

sync(store, router)

export default router

function createRouter () {
  const router = new Router({
    scrollBehavior,
    mode: 'history',
    routes
  })
  router.beforeEach(beforeEach)
  router.afterEach(afterEach)
  return router
}


async function beforeEach (to, from, next) {
  const components = await resolveComponents(
    router.getMatchedComponents({ ...to })
  )

  if (components.length === 0) {
    return next()
  }

  const middleware = getMiddleware(components)

  // Call each middleware.
  callMiddleware(middleware, to, from, (...args) => {
    // Set the application layout only if "next()" was called with no args.
    if (args.length === 0) {
      router.app.setLayout(components[0].layout || '')
    }

    next(...args)
  })
}


async function afterEach (to, from, next) {
  await router.app.$nextTick()
  router.app.$loading.finish()
}

function callMiddleware (middleware, to, from, next) {
  const stack = middleware.reverse()

  const _next = (...args) => {
    // Stop if "_next" was called with an argument or the stack is empty.
    if (args.length > 0 || stack.length === 0) {
      if (args.length > 0) {
        router.app.$loading.finish()
      }

      return next(...args)
    }

    const middleware = stack.pop()

    if (typeof middleware === 'function') {
      middleware(to, from, _next)
    } else if (routeMiddleware[middleware]) {
      routeMiddleware[middleware](to, from, _next)
    } else {
      throw Error(`Undefined middleware [${middleware}]`)
    }
  }

  _next()
}

function resolveComponents (components) {
  return Promise.all(components.map(component => {
    return typeof component === 'function' ? component() : component
  }))
}

function getMiddleware (components) {
  const middleware = [...globalMiddleware]

  components.filter(c => c.middleware).forEach(component => {
    if (Array.isArray(component.middleware)) {
      middleware.push(...component.middleware)
    } else {
      middleware.push(component.middleware)
    }
  })

  return middleware
}

function scrollBehavior (to, from, savedPosition) {
  if (savedPosition) {
    return savedPosition
  }

  if (to.hash) {
    return { selector: to.hash }
  }

  const [component] = router.getMatchedComponents({ ...to }).slice(-1)

  if (component && component.scrollToTop === false) {
    return {}
  }

  return { x: 0, y: 0 }
}

function resolveMiddleware (requireContext) {
  return requireContext.keys()
    .map(file =>
      [file.replace(/(^.\/)|(\.js$)/g, ''), requireContext(file)]
    )
    .reduce((guards, [name, guard]) => (
      { ...guards, [name]: guard.default }
    ), {})
}

router / router.js

const Welcome = () => import('~/pages/welcome').then(m => m.default || m)

const About = () => import('~/pages/about/about').then(m => m.default || m)
const Faq = () => import('~/pages/about/faq').then(m => m.default || m)
const privacyPolicy = () => import('~/pages/about/privacy-policy').then(m => m.default || m)


export default [

    { path: '/', name: 'welcome', component: Welcome },
    { path: '/about', name: 'about', component: About},
    { path: '/about/faq', name: 'about.faq', component: Faq},
    { path: '/about/privacy-policy', name: 'about.privacyPolicy', component: privacyPolicy},

将i18n的语言环境附加到url-Vue JS SPA

0 个答案: