快捷導(dǎo)航

在nuxt中使用路由重定向的實(shí)例

更新時(shí)間：2020年11月06日 11:27:31 作者：元無(wú)心

這篇文章主要介紹了在nuxt中使用路由重定向的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

我們都知道，在寫(xiě)SPA的時(shí)候，我們可以通過(guò)配置vue-router來(lái)實(shí)現(xiàn)路由的重定向。

官方文檔（以及ts類(lèi)型）的定義中給出了這一選項(xiàng)：

interface RouteConfig = {
 path: string,
 redirect?: string | Location | Function,
}

也就是說(shuō)，我們可以定義這樣一個(gè)路由：

{
  path: "/foo",
  redirect: "/foo/bar",
}

這樣，我們?cè)谠L問(wèn)/foo的時(shí)候，就會(huì)被重定向到/foo/bar。這些都是老生常談了。

然而，到了SSR的環(huán)境下，如果使用nuxt，因?yàn)閚uxt采用了約定大于配置的方式，pages目錄代替了路由，雖然簡(jiǎn)化了配置，但是給一些需要定制化的場(chǎng)景的手動(dòng)配置帶來(lái)了一些麻煩，并且nuxt官方也不建議手動(dòng)配置router，如果實(shí)在需要配置，可以在nuxt.config.js里進(jìn)行一些中間件配置，但是這個(gè)對(duì)于重定向這種特別簡(jiǎn)單的事情來(lái)說(shuō)，未免有殺雞用牛刀之嫌。

所以，我一開(kāi)始想的辦法是，在pages目錄下，需要重定向的路由組件里，增加一個(gè)beforeCreate()鉤子：

<template>
 <div></div>
</template>

<script>
export default {
 beforeCreate() {
  this.$router.replace('/path/to')
 }
}
</script>

相當(dāng)于在組件創(chuàng)建之前進(jìn)行一個(gè)路由的替換，這個(gè)組件作為路由的占位。之所以不用push而是用replace，因?yàn)閞eplace更接近重定向的效果，我們總不希望用戶(hù)還能回退（比如瀏覽器的后退鍵）到重定向之前的頁(yè)面里去吧。

但是這個(gè)方案有一個(gè)問(wèn)題，就是在路由“重定向”的過(guò)程中，界面會(huì)發(fā)生輕微的閃爍，這樣體驗(yàn)就很不好了。所以，肯定需要其他的解決方案。

至于為什么會(huì)閃屏，因?yàn)殡m然beforeCreate鉤子理論上會(huì)先于模板編譯執(zhí)行，但是這是在SFC環(huán)境下，模板編譯會(huì)提前執(zhí)行；如果是用script標(biāo)簽引入的Vue就不會(huì)有這個(gè)問(wèn)題：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router@3.1.6/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
  <router-view/>
</div>

<script>
  const Foo = {template: '<div>foo</div>'};
  const Bar = {template: '<div>bar</div>'};

  const routes = [
    {path: '/foo', component: Foo, redirect: '/bar'},
    {path: '/bar', component: Bar}
  ];

  const router = new VueRouter({routes});

  const app = new Vue({
    el: '#app',
    router
  })
</script>
</body>
</html>

如果有需要，可以進(jìn)一步參考Vue官方的生命周期圖示。

查了一下文檔，好在nuxt提供了這么一個(gè)重定向的API，就藏在context對(duì)象里。事實(shí)上，下面所有的解決方案，都是基于這個(gè)context對(duì)象進(jìn)行的：

屬性字段	類(lèi)型	可用	描述
redirect	Function	客戶(hù)端 & 服務(wù)端	用這個(gè)方法重定向用戶(hù)請(qǐng)求到另一個(gè)路由。狀態(tài)碼在服務(wù)端被使用，默認(rèn) 302 redirect([status,] path [, query])

同時(shí)，我們還知道：

asyncData方法會(huì)在組件（限于頁(yè)面組件）每次加載之前被調(diào)用。它可以在服務(wù)端或路由更新之前被調(diào)用。在這個(gè)方法被調(diào)用的時(shí)候，第一個(gè)參數(shù)被設(shè)定為當(dāng)前頁(yè)面的上下文對(duì)象，你可以利用 asyncData方法來(lái)獲取數(shù)據(jù)并返回給當(dāng)前組件。

所以，我們可以這么寫(xiě)：

<template>
 <div></div>
</template>

<script>
export default {
 asyncData({ redirect }) {
  redirect('/path/to')
 }
}
</script>

這樣就可以解決問(wèn)題了。可能你會(huì)想為什么不用fetch來(lái)進(jìn)行路由跳轉(zhuǎn)，因?yàn)閒etch是用來(lái)處理vuex store的數(shù)據(jù)的，我個(gè)人認(rèn)為從語(yǔ)義上不適合處理路由跳轉(zhuǎn)的任務(wù)；當(dāng)然，實(shí)際上是可以正常運(yùn)行的，反正都是基于context對(duì)象進(jìn)行的操作。

如果你對(duì)上面那個(gè)空的div感到不滿(mǎn)意，覺(jué)得不優(yōu)雅，你也可以搞得更極端一點(diǎn)，使用渲染函數(shù)來(lái)渲染模板的根節(jié)點(diǎn)：

<script>
export default {
 asyncData({ redirect }) {
  redirect('/path/to')
 },
 render(h) {
  return h('div')
 }
}
</script>

這樣看起來(lái)可能更簡(jiǎn)潔一點(diǎn)。

但是這種寫(xiě)法對(duì)于路由鑒權(quán)那種場(chǎng)景是不太適用的。比如，我需要在進(jìn)行路由跳轉(zhuǎn)前驗(yàn)證用戶(hù)的身份，我總不能在每個(gè)page里都寫(xiě)這么一段吧，維護(hù)起來(lái)也不方便，如果路由改了，每個(gè)頁(yè)面都得改。

所以，這個(gè)時(shí)候就得用到nuxt提供的中間件機(jī)制了。中間件可以在page層面配置，也可以全局配置，參考官方的例子：

pages/secret.vue

<template>
 <h1>Secret page</h1>
</template>

<script>
export default {
 middleware: 'authenticated'
}
</script>

middleware/authenticated.js

export default function ({ store, redirect }) {
 // If the user is not authenticated
 if (!store.state.authenticated) {
  return redirect('/login')
 }
}

這個(gè)也放到nuxt.config.js里，變成全局的配置：

module.exports = {
 router: {
  middleware: 'authenticated'
 }
}

但是有一點(diǎn)需要注意，也是只要使用路由就需要注意的一個(gè)問(wèn)題：避免循環(huán)重定向。這和避免寫(xiě)死循環(huán)是一個(gè)道理。

總結(jié)一下：

如果是少數(shù)幾個(gè)頁(yè)面之間的固定的重定向邏輯，可以直接用asyncData（或者fetch，雖然我個(gè)人覺(jué)得語(yǔ)義不好）參數(shù)里context的redirect來(lái)進(jìn)行重定向；

如果需要重定向的頁(yè)面數(shù)量較多（可以考慮使用中間件 + 表驅(qū)動(dòng)），或者存在一些動(dòng)態(tài)變化的重定向邏輯（比如路由鑒權(quán)），可以考慮使用中間件機(jī)制。

補(bǔ)充知識(shí)：使用Nuxt.js和Vue-i18n重定向到同一頁(yè)面但切換語(yǔ)言URL

公司最近提出一個(gè)需求，就是當(dāng)用戶(hù)切換語(yǔ)言的時(shí)候，在路由中需要將其選中的語(yǔ)言加入到路由中

例如網(wǎng)址：

localhost/about

應(yīng)該通過(guò)該方法（通過(guò)按特定按鈕）重定向到：

localhost/bg/about

Nuxt文檔中所建議的，用于使用Vue-i18n進(jìn)行本地化https://nuxtjs.org/examples/i18n/

在 Nuxt 官網(wǎng)中也給出了國(guó)際化的例子，但是并不滿(mǎn)足公司的這個(gè)需求，大家有興趣可以去看下

Nuxt 官網(wǎng) 國(guó)際化的例子

在 components文件夾下面新建 LangSelect.vue文件

<template>
 <el-dropdown trigger="click" class="international" @command="handleSetLanguage">
  <div>
   <i class="el-icon-share">{{$t('home.changelang')}}</i>
  </div>
  <el-dropdown-menu slot="dropdown">
   <el-dropdown-item :disabled="language==='zh'" command="zh">中文</el-dropdown-item>
   <el-dropdown-item :disabled="language==='en'" command="en">English</el-dropdown-item>
  </el-dropdown-menu>
 </el-dropdown>
</template>

<script>
export default {
 computed: {
  language() {
   return this.$store.state.locale;
  }
 },
 methods: {
  handleSetLanguage(language) {
   this.$i18n.locale = language;
   console.log(this.$i18n.locale);
   this.$store.commit("SET_LANG", language);
  //  console.log(this.$store.state.locale, "locale");
   var beforePath = this.$nuxt.$router.history.current.path;
   // -- Removing the previous locale from the url
   var changePath = this.$store.state.locale
   var result = "";
   result = beforePath.replace("/en", "");
   result = result.replace("/zh", "");
  this.$nuxt.$router.replace({ path: "/" + changePath + result });
   this.$message({
    message: "Switch Language Success",
    type: "success"
   });
  }
 }

};
</script>

在middleware文件中新建i18n.js

export default function ({ isHMR, app, store, route, params, error, redirect }) {
  const defaultLocale = app.i18n.fallbackLocale
  // If middleware is called from hot module replacement, ignore it
  //如果從熱模塊替換調(diào)用中間件，請(qǐng)忽略它
  if (isHMR) { return }
  // Get locale from params
  const locale = params.lang || defaultLocale
  if (!store.state.locales.includes(locale)) {
   return error({ message: 'This page could not be found.', statusCode: 404 })
  }
  // Set locale
  store.commit('SET_LANG', locale)
  app.i18n.locale = store.state.locale

  if(route.fullPath == '/') {
   return redirect('/' + defaultLocale + '' + route.fullPath)
  }
 }

其他的配置都可以在上面給出的官網(wǎng)鏈接中找到，這里就不在重復(fù)了。

以上這篇在nuxt中使用路由重定向的實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: