溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

如何實現(xiàn)nuxt 路由、過渡特效、中間件

發(fā)布時間：2020-11-07 14:29:00 來源：億速云 閱讀：606 作者：Leah 欄目：開發(fā)技術(shù)

這篇文章運用簡單易懂的例子給大家介紹如何實現(xiàn)nuxt 路由、過渡特效、中間件，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

1、定義一級路由

在pages下創(chuàng)建.vue文件,訪問路徑后加上/文件名,訪問

index.vue對應(yīng)的路徑為'/';

2、創(chuàng)建多級路由

在pages創(chuàng)建文件夾,文件夾內(nèi)創(chuàng)建.vue文件

訪問路徑:/文件夾名/文件名

pages/

--| user/

-----| index.vue

-----| one.vue

--| index.vue

將被轉(zhuǎn)換成:

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、動態(tài)路由參數(shù)

以一個_下劃線作為前綴的Vue文件或目錄。

獲取參數(shù)this.$route.params.鍵名 _名稱會變成/:名稱

pages/
 --| _slug/
 -----| comments.vue
 -----| index.vue
 --| users/
 -----| _id.vue
 --| index.vue
 
 router: {
 routes: [
  {
  name: 'index',
  path: '/',
  component: 'pages/index.vue'
  },
  {
  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、動態(tài)路由參數(shù)驗證

和data同級

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

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

return true;
 }

5、嵌套路由

x.vue的嵌套路由,先傳鍵x文件夾,其內(nèi)部的.vue文件將成為其嵌套路由

父組件<nuxt-child/>顯示嵌套子組件內(nèi)容

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] = {
  //將查找的路由之前配置解構(gòu)
   ...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 中添加一下內(nèi)容：

.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、中間件

中間件允許定義一個自定義函數(shù)運行在一個頁面或一組頁面渲染之前。

(1)在middleware文件夾下創(chuàng)建.js文件,文件名的名稱為中間件名稱

export default function(context){

 //接收一個context上下文對象作為參數(shù)
 ...
 //context.route可獲取路由信息
 }

異步中間件:返回Promise即可

(2)在每個頁面執(zhí)行中間件

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標(biāo)簽上添加activeClass=‘類',再定義類的樣式

11、配置路由模式

在nuxt.config.js中

 router:{
 mode:'hash'
 }

補充知識：nuxt 設(shè)置路由的meta屬性,nuxt 怎么設(shè)置路由的meta,nuxt 怎么設(shè)置router的meta

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

基于nuxt.js的管理后臺項目,一個項目部署,可以一站式管理數(shù)據(jù)庫和你的業(yè)務(wù)的增刪改查操作,項目暫未完善,待完善后開源于github

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

如下所示：

routes.js 如下:

/**
 * nuxt的路由菜單配置
 * @description 僅僅只用于側(cè)邊欄的菜單顯示和權(quán)限,其它的不做任何功能
 */
const menus = [{
    meta: {
      requireAuth: false, //菜單權(quán)限
      title: '系統(tǒng)首頁', //菜單名
      icon: 'fa fa-bar-chart', //菜單圖標(biāo)
    },
    path: "/dashboard",
    name: "dashboard",
  },
  {
    meta: {
      requireAuth: false, //菜單權(quán)限
      title: '歡迎頁', //菜單名
    },
    path: "Welcome",
    name: "dashboard-Welcome"
  },
  {
    meta: {
      requireAuth: false, //菜單權(quán)限
      title: '示例功能', //菜單名
      icon: 'fa fa-bar-chart', //菜單圖標(biāo)
    },
    path: "/demos",
    name: "demos",
  },
  {
    meta: {
      requireAuth: false, //菜單權(quán)限
      title: '列表Demo', //菜單名
    },
    path: "List",
    name: "demos-List"
  },
  {
    meta: {
      requireAuth: false, //菜單權(quán)限
      title: '列表詳情', //菜單名
    },
    path: "List/Detail/:id&#63;",
    name: "demos-List-Detail-id"
  },
  {
    meta: {
      requireAuth: false, //菜單權(quán)限
      title: '數(shù)據(jù)分析', //菜單名
      icon: 'fa fa-bar-chart', //菜單圖標(biāo)
    },
    path: "/datas/UserAnalysis",
    name: "datas-UserAnalysis"
  },
  {
    path: "/",
    name: "index"
  }
];
 
 
/**
 * 遞歸查詢路由權(quán)限
 * @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);
};

如何實現(xiàn)nuxt 路由、過渡特效、中間件

然后設(shè)置nuxt.config.js

nuxt.config.js 如下配置:

  router: { //中間件允許您定義一個自定義函數(shù)運行在一個頁面或一組頁面渲染之前。
    middleware: ['authorities'],
    extendRoutes: routes
  },

如何實現(xiàn)nuxt 路由、過渡特效、中間件

這個問題暫時得到了解決,可以根據(jù)routes生成標(biāo)簽導(dǎo)航/側(cè)邊欄菜單/面包屑導(dǎo)航等:

如何實現(xiàn)nuxt 路由、過渡特效、中間件

關(guān)于如何實現(xiàn)nuxt 路由、過渡特效、中間件就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手