其實動態路由就是帶引數的路由。比如我們現在新聞模組下面有很多新聞詳情頁，這時候就需要動態路由的幫助了。

新聞詳細頁面

我們在news資料夾下面新建了_id.vue的檔案，以下劃線為字首的Vue檔案就是動態路由，然後在檔案裡邊有$route.params.id來接收引數。

/pages/news/_id.vue

<template>
 <div>
  <h2>News-Content{{$route.params.id}}</h2>
  <ul>
   <li><a href="/" rel="external nofollow" rel="external nofollow" >Home</a></li>
  </ul>
 </div>
</template>

修改新聞首頁路由

我們在/pages/news/index.vue進行修改，增加兩個詳細頁的路由News-1和News-2.

<template>
 <div>
  <h2>News Index page</h2>
  <p>NewID:{{$route.params.newsId}}</p>
  <ul>
   <li><nuxt-link :to="{name:'index'}">Home</nuxt-link></li>
   <li><a href="/news/123" rel="external nofollow" rel="external nofollow" >News-1</a></li>
   <li><a href="/news/456" rel="external nofollow" >News-2</a></li>
  </ul>
 </div>
</template>

<script>
export default {

}
</script>

動態引數校驗

進入一個頁面，對引數傳遞的正確性校驗是必須的，Nuxt.js也貼心的為我們準備了校驗方法validate()。 /pages/news/_id.vue

<template>
 <div>
  <h2>News-Content{{$route.params.id}}</h2>
  <ul>
   <li><a href="/" rel="external nofollow" rel="external nofollow" >Home</a></li>
  </ul>
 </div>
</template>

<script>
export default {
 validate({params}){
  // Must be a number
  return /^\d+$/.test(params.id)
 }
}
</script>

/pages/news/index.vue

<template>
 <div>
  <h2>News Index page</h2>
  <p>NewID:{{$route.params.newsId}}</p>
  <ul>
   <li><nuxt-link :to="{name:'index'}">Home</nuxt-link></li>
   <li><a href="/news/123" rel="external nofollow" rel="external nofollow" >News-1</a></li>
   <li><a href="/news/a" rel="external nofollow" >News-2</a></li>
  </ul>
 </div>
</template>

<script>
export default {

}
</script>

我們使用了validate方法，並把params傳遞進去，然後用正則進行了校驗，如果正則返回了true正常進入頁面，如果返回false進入404頁面。

補充知識：Nuxt 實現使用者鑑權登陸

引言

部落格前臺重構完畢了，接下來就是後臺部分了，後臺的主要功能就是釋出、刪除、修改文章，自然不是誰都能隨便進的。在 vue 專案中，我是在 Vue Router 的全域性前置守衛裡判斷當前使用者是否有 cookie 從而判斷是否有權進入後臺。而 Nuxt 相比 Vue 專案最大的不同之一就是沒有使用 Vue Router 而是使用 目錄來進行頁面路由，自然我們就失去了 全域性前置守衛這個利器，當然 Nuxt 是有解決辦的，不過在那之前我們需要先來了解一下鑑權的原理。

Cookie 和 Session

相信前端的同學們對這兩個名字早就有所耳聞，卻不一定有詳細的瞭解。眾所周知，我們瀏覽網頁使用的 HTTP 協議是無狀態的的，也就是說你每一次請求對於伺服器來說都是一樣的，它沒有辦法記住這個請求是你發的。所以這裡就要用到Cookie。

Cookie 是服務端設定的，由瀏覽器儲存在你的硬碟中的一組資料，，比如你的使用者 資料，每次向伺服器傳送請求就會攜帶上這個資料。伺服器檢視就能知道這是誰發過來的。這一過程就稱為Session（會話）

Session 初始是指一種概念，是你和網站發生互動的一個週期。在這個週期中伺服器就是通過儲存在瀏覽器的 Cookie 來判別你是誰。但是因為儲存在本地的Cookie並不安全，誰都可以看到並更改，所以現在更為流行的做法是僅僅通過 Cookie 儲存 的唯一的使用者識別符號（SessionID）來識別使用者，而使用者資訊儲存在伺服器端。所以 Session 這個概念可以說是 Cookie 的上級也可以說是其同級

Nuxt 鑑權

講解了 Nuxt 鑑權的基本原理，我們可以知道鑑權就是在在使用者進入這個頁面的時候對本地的 Cookie 進行判斷，存在設定好的 Cookie 那麼說明這個使用者已經登陸過了，放他過去。啥也沒有？ 不行你去給我登陸，就跳轉到登入頁面。明白了這個流程就開始具體的工作了。

伺服器端

在伺服器端我們使用 koa-session 安裝 koa-session

npm install koa-session

npm install koa-session-mongoose //使用 mongodb 儲存 Session 資訊

然後在入口檔案中這樣使用

app.use(
 session(
  {
   key: "***",//加密金鑰
   overwrite: true,//覆寫Cookie
   httpOnly: true,//經允許通過 JS 來更改
   renew: true,store: new MongooseStore({
    createIndexes: "appSessions",connection: mongoose,expires: 86400,// 1 day is the default
    name: "AppSession"
   })         //傳入一個用於session的外部儲存，我這裡是使用了 mongodb 
  },app
 )
);

因為 koa 預設會把 Session 打到 ctx.session 中,不方便使用者端獲取，所以我們把它移一下位，挪到 ctx.req.session 中

 app.use((ctx) => {
  ctx.status = 200
  ctx.respond = false // Bypass Koa's built-in response handling
  ctx.req.session = ctx.session
  ctx.req.ctx = ctx // This might be useful later on,e.g. in nuxtServerInit or with nuxt-stash
   return new Promise((resolve,reject) => {
    ctx.res.on('close',resolve)
    ctx.res.on('finish',resolve)
    nuxt.render(ctx.req,ctx.res,promise => {
     // nuxt.render passes a rejected promise into callback on error.
     promise.then(resolve).catch(reject)
    })
   })
 })

這是登陸函式，查詢資料庫是否又對應的使用者名稱和密碼，存在的話，給客戶端設定一個 Cookie 返回登入成功

 static async login(ctx) {
  let { passwd,email } = ctx.request.body;
  let hasuser = await UserModel.findOne({ email: email,passwd: md(passwd) });

  if (!hasuser) {
   return ctx.error({});
  }
  else {
   let userid = hasuser._id;
   const { session } = ctx;
   session.userid = userid;
   return ctx.success({ data: { userid: userid } });
  }
 }

服務端設定完成了

客戶端（Nuxt）

其實以上的步驟和 Vue 專案中一模一樣，Nuxt 中主要的不同就是失去了全域性前置守衛，那麼要在哪裡判斷是否存在 Cookie 呢，別急，Nuxt 官方自然是給瞭解決方案，先看一下 Nuxt 的生命週期

image

這裡我們用到的就是紅框中的 nuxtServerInit 和 middleware 這兩個時期，先來看程式碼

// store/index.js Vuex 檔案中
export const actions = {
 // nuxtServerInit is called by Nuxt.js before server-rendering every page
 nuxtServerInit({ commit },{ req }) {
  if (req.session && req.session.userid) {
   console.log("使用者已經登入");
   commit("SET_USER",req.session.userid);
  }
 },export const mutations = {
 SET_USER(state,user) {
  state.authUser = user;
 },}

Store action 模組中的 nuxtServerInit 函式是整個生命週期 最先執行的，我們就在這裡判斷當前使用者瀏覽器中是否有 Cookie ，如果有的話就在 state 中用一個欄位儲存下來。是不是還挺像全域性前置守衛。這裡還只是做了判斷，打上了印記你登沒登陸，攔截在哪裡呢，別急，就是下一個流程 middleware 中。

開啟 middleware 資料夾( Nuxt 專案自帶)，新建 auth.js 檔案

// auth.js
export default function ({ store,redirect }) {
 if (!store.state.authUser) {
  return redirect('/welcome')
 }
}

瞧一下 Vuex 中看看你有沒有登陸，沒有的話把你送到登陸頁面去，簡單直接吧，只要在需要鑑權的頁面引用這個中介軟體即可，對於此專案只要在後臺管理頁面引用就好

export default {
  middleware: 'auth',};

總結

就這樣完成了鑑權的操作，沒有登陸過的使用者在訪問後臺是時候會被重定向到登陸頁面去，就是很簡單的使用了一下 Cookie ，限於專案性質，session 的很多功能並沒有用到，比如在伺服器端儲存使用者資訊。主要是它的功能也就是防止別人訪問後臺，非常簡單。

以上這篇Nuxt的動態路由和引數校驗操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。