在nuxt中使用路由重定向

我們都知道，在寫spa的時候，我們可以通過配置vue-router來實現路由的重定向。官方文件（以及ts型別）的定義中給出了這一選項：

inte***ce
routeconfig
=

也就是說，我們可以定義這樣乙個路由：

這樣，我們在訪問/foo的時候，就會被重定向到/foo/bar。這些都是老生常談了。

然而，到了ssr的環境下，如果使用nuxt，因為nuxt採用了約定大於配置的方式，pages目錄代替了路由，雖然簡化了配置，但是給一些需要定製化的場景的手動配置帶來了一些麻煩，並且nuxt官方也不建議手動配置router，如果實在需要配置，可以在nuxt.config.js裡進行一些中介軟體配置，但是這個對於重定向這種特別簡單的事情來說，未免有殺雞用牛刀之嫌。

所以，我一開始想的辦法是，在pages目錄下，需要重定向的路由元件裡，增加乙個beforecreate()鉤子：


<
/div>
<
/template>
export
default
}<
/script>

相當於在元件建立之前進行乙個路由的替換，這個元件作為路由的佔位。之所以不用push而是用replace，因為replace更接近重定向的效果，我們總不希望使用者還能回退（比如瀏覽器的後退鍵）到重定向之前的頁面裡去吧。

但是這個方案有乙個問題，就是在路由「重定向」的過程中，介面會發生輕微的閃爍，這樣體驗就很不好了。所以，肯定需要其他的解決方案。至於為什麼會閃屏，因為雖然beforecreate鉤子理論上會先於模板編譯執行，但是這是在sfc環境下，模板編譯會提前執行；如果是用script標籤引入的vue就不會有這個問題：


>
>
charset
="utf-8"
>
src=
"">
script
>
src=
"">
script
>
head
>
>
>
/>
div>
>
const foo =
;const bar =
;const routes =[,
];const router =
newvuerouter()
;new
vue(
)script
>
body
>
html
>

如果有需要，可以進一步參考vue官方的生命週期圖示。

查了一下文件，好在nuxt提供了這麼乙個重定向的api，就藏在context物件裡。事實上，下面所有的解決方案，都是基於這個context物件進行的：

屬性字段

型別可用

描述redirectfunction客戶端 & 服務端

用這個方法重定向使用者請求到另乙個路由。狀態碼在服務端被使用，預設 302redirect([status,] path [, query])

同時，我們還知道：

asyncdata方法會在元件（限於頁面元件）每次載入之前被呼叫。它可以在服務端或路由更新之前被呼叫。在這個方法被呼叫的時候，第乙個引數被設定為當前頁面的上下文物件，你可以利用asyncdata方法來獲取資料並返回給當前元件。

所以，我們可以這麼寫：


<
/div>
<
/template>
export
default)}
<
/script>

這樣就可以解決問題了。可能你會想為什麼不用fetch來進行路由跳轉，因為fetch是用來處理vuex store的資料的，我個人認為從語義上不適合處理路由跳轉的任務；當然，實際上是可以正常執行的，反正都是基於context物件進行的操作。

如果你對上面那個空的div感到不滿意，覺得不優雅，你也可以搞得更極端一點，使用渲染函式來渲染模板的根節點：


export
default),
render
(h)}
<
/script>

這樣看起來可能更簡潔一點。

但是這種寫法對於路由鑑權那種場景是不太適用的。比如，我需要在進行路由跳轉前驗證使用者的身份，我總不能在每個page裡都寫這麼一段吧，維護起來也不方便，如果路由改了，每個頁面都得改。所以，這個時候就得用到nuxt提供的中介軟體機制了。中介軟體可以在page層面配置，也可以全域性配置，參考官方的例子：

pages/secret.vue


secret page<
/h1>
<
/template>
export
default
<
/script>

middleware/authenticated.js

export
default
function()
}

這個也放到nuxt.config.js裡，變成全域性的配置：

module.exports =
}

但是有一點需要注意，也是只要使用路由就需要注意的乙個問題：避免迴圈重定向。這和避免寫死迴圈是乙個道理。

總結一下：

在nuxt中使用路由重定向

在Nuxt中使用scss語法

Django路由重定向

路由重定向路由設定高亮

在nuxt中使用路由重定向

在Nuxt中使用scss語法

Django路由重定向

路由重定向 路由設定高亮

相關推薦

路由重定向路由設定高亮