在pages下的檔案.vue檔案會被自動載入成路由

0、宣告式導航

<nuxt-link to="/">首頁</nuxt-link>

用法和router-link用法一致

1、定義一級路由

在pages下建立.vue檔案,訪問路徑後加上/檔名,訪問

index.vue對應的路徑為'/';

2、建立多級路由

在pages建立資料夾,資料夾內建立.vue檔案

訪問路徑:/資料夾名/檔名

pages/

--| user/

-----| index.vue

-----| one.vue

--| index.vue

將被轉換成:

router: {
 routes: [
  {
  name: 'index',path: '/',component: 'pages/index.vue'
  },{
  name: 'user',path: '/user',component: 'pages/user/index.vue'
  },{
  name: 'user-one',path: '/user/one',component: 'pages/user/one.vue'
  }
 ]
 }

3、動態路由引數

以一個_下劃線作為字首的Vue檔案或目錄。

獲取引數this.$route.params.鍵名 _名稱會變成/:名稱

pages/
 --| _slug/
 -----| comments.vue
 -----| index.vue
 --| users/
 -----| _id.vue
 --| index.vue
 
 router: {
 routes: [
  {
  name: 'index',{
  name: 'users-id',path: '/users/:id?',component: 'pages/users/_id.vue'
  },{
  name: 'slug',path: '/:slug',component: 'pages/_slug/index.vue'
  },{
  name: 'slug-comments',path: '/:slug/comments',component: 'pages/_slug/comments.vue'
  }
 ]
 }

4、動態路由引數驗證

和data同級

 validate({params}) { 
 console.log(params.鍵名); 

// 如果校驗方法返回的值不為 true或Promise中 resolve 解析為false或丟擲 Error ， Nuxt.js 將自動載入顯示 404 錯誤頁面或 500 錯誤頁面。

return true;
 }

5、巢狀路由

x.vue的巢狀路由,先傳鍵x資料夾,其內部的.vue檔案將成為其巢狀路由

父元件<nuxt-child/>顯示巢狀子元件內容

pages/
 --| users/
 -----| _id.vue
 -----| index.vue
 --| users.vue
 
 router: {
 routes: [
  {
  path: '/users',component: 'pages/users.vue',children: [
   {
   path: '',component: 'pages/users/index.vue',name: 'users'
   },{
   path: ':id',component: 'pages/users/_id.vue',name: 'users-id'
   }
  ]
  }
 ]
 }

6、命名檢視

<nuxt name="components中的名稱"/> 或 <nuxt-child name="components中的名稱"/>

在nuxt.config.js中新增路由擴充套件配置

 router: {
  extendRoutes(routes,resolve) {
  
  //查詢要使用命名檢視的元件,獲取index
  const index = routes.findIndex(route => route.name === '路由名稱')
  
  routes[index] = {
  //將查詢的路由之前配置解構
   ...routes[index],//新增components和chunkNames擴充套件路由配置來使用命名路由
   components: {
   default: routes[index].component,//自定義名稱: resolve(__dirname,'顯示的元件路徑/.vue')
   },chunkNames: {
   //自定義名稱: '顯示的元件路徑/.vue'
   }
  }
  }
 }

7、過渡動效

(1)全域性過渡動效

讓每一個頁面的切換都有淡出 (fade) 效果

1、在全域性樣式檔案 assets/x.css 裡新增一下樣式：

 .page-enter-active,.page-leave-active {
  transition: opacity 0.5s;
 }
 .page-enter,.page-leave-active {
  opacity: 0;
 }
 

2、nuxt.config.js檔案中

css: ['assets/x.css']

(2)某個頁面自定義過渡特效

1、在全域性樣式 assets/x.css 中新增一下內容：

.test-enter-active,.test-leave-active {
 transition: opacity 0.5s;
}
.test-enter,.test-leave-active {
 opacity: 0;
}

2、nuxt.config.js檔案中

css: ['assets/x.css']

3、在元件中和data同級

transition: 'test'

8、中介軟體

中介軟體允許定義一個自定義函式執行在一個頁面或一組頁面渲染之前。

(1)在middleware資料夾下建立.js檔案,檔名的名稱為中介軟體名稱

export default function(context){

 //接收一個context上下文物件作為引數
 ...
 //context.route可獲取路由資訊
 }

非同步中介軟體:返回Promise即可

(2)在每個頁面執行中介軟體

nuxt.config.js中新增

router: {
 middleware: '中介軟體名稱'
 }
 }

(3)指定的佈局或者頁面

元件中與data同級,新增:

middleware: '中介軟體名稱'

9、路由重定向

方式一:

元件中

 asyncData(context,callback) {
 context.redirect('/');
 },

方式二:

定義中介軟體

 export default function(context)
 {
 if(context.isHMR)
 {
 return; 避免熱更新時,重新走一遍
 }

  if(context.route.fullPath==='/xxx)
  {
  context.redirect('/x')
  }
 }

將中介軟體在nuxt.config.js中配置成全域性或單獨配置元件

10、路由高亮

方式一:

 router: {
  linkActiveClass: 'active-link'或
  linkExactActiveClass: 'exact-active-link'
 }

方式二：

直接新增類名,style不能有scoped屬性

.nuxt-link-exact-active 父路由不高亮

.nuxt-link-active 父路由也會高亮

方式三:

每個nuxt-link標籤上新增activeClass=‘類',再定義類的樣式

11、配置路由模式

在nuxt.config.js中

 router:{
 mode:'hash'
 }

補充知識：nuxt 設定路由的meta屬性,nuxt 怎麼設定路由的meta,nuxt 怎麼設定router的meta

nuxt 官網說的 專注於UI的渲染,作者想試一下用來寫後臺管理的介面感覺何如,可以開啟 spa模式,或者不改變,也會有不一樣的體驗哦.

基於nuxt.js的管理後臺專案,一個專案部署,可以一站式管理資料庫和你的業務的增刪改查操作,專案暫未完善,待完善後開源於github

一個問題,想了好多種辦法,終於用了一個笨方法解決了這個問題

如下所示：

routes.js 如下:

/**
 * nuxt的路由選單配置
 * @description 僅僅只用於側邊欄的選單顯示和許可權,其它的不做任何功能
 */
const menus = [{
    meta: {
      requireAuth: false,//選單許可權
      title: '系統首頁',//選單名
      icon: 'fa fa-bar-chart',//選單圖示
    },path: "/dashboard",name: "dashboard",},{
    meta: {
      requireAuth: false,//選單許可權
      title: '歡迎頁',//選單名
    },path: "Welcome",name: "dashboard-Welcome"
  },//選單許可權
      title: '示例功能',path: "/demos",name: "demos",//選單許可權
      title: '列表Demo',path: "List",name: "demos-List"
  },//選單許可權
      title: '列表詳情',path: "List/Detail/:id?",name: "demos-List-Detail-id"
  },//選單許可權
      title: '資料分析',path: "/datas/UserAnalysis",name: "datas-UserAnalysis"
  },{
    path: "/",name: "index"
  }
];
 
 
/**
 * 遞迴查詢路由許可權
 * @param {*} list
 * @param {*} menu
 */
const iterator = (list) => {
  for (let item in list) {
    for (const m in menus) {
      if ((list[item].name === menus[m].name) && (list[item].path === menus[m].path)) {
        console.log((list[item].name === menus[m].name) && (list[item].path === menus[m].path));
        list[item].meta = menus[m].meta;
        list[item].meta.requireAuth = true;
      }
    }
    if (list[item].children && list[item].children.length > 0) {
      iterator(list[item].children);
    } else {
      return list;
    };
  }
};
 
export default (routes,resolve) => {
  routes = iterator(routes);
  console.log(routes);
};

然後設定nuxt.config.js

nuxt.config.js 如下配置:

  router: { //中介軟體允許您定義一個自定義函式執行在一個頁面或一組頁面渲染之前。
    middleware: ['authorities'],extendRoutes: routes
  },

這個問題暫時得到了解決,可以根據routes生成標籤導航/側邊欄選單/麵包屑導航等:

以上這篇nuxt 路由、過渡特效、中介軟體的實現程式碼就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。