nuxt 路由、過渡特效、中間件的實現(xiàn)代碼
在pages下的文件.vue文件會被自動加載成路由
0、聲明式導航
<nuxt-link to="/">首頁</nuxt-link>
用法和router-link用法一致
1、定義一級路由
在pages下創(chuàng)建.vue文件,訪問路徑后加上/文件名,訪問
index.vue對應的路徑為'/';
2、創(chuàng)建多級路由
在pages創(chuàng)建文件夾,文件夾內創(chuàng)建.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、動態(tài)路由參數
以一個_下劃線作為前綴的Vue文件或目錄。
獲取參數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)路由參數驗證
和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文件夾下創(chuàng)建.js文件,文件名的名稱為中間件名稱
export default function(context){
//接收一個context上下文對象作為參數
...
//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標簽上添加activeClass=‘類',再定義類的樣式
11、配置路由模式
在nuxt.config.js中
router:{
mode:'hash'
}
補充知識：nuxt 設置路由的meta屬性,nuxt 怎么設置路由的meta,nuxt 怎么設置router的meta
nuxt 官網說的 專注于UI的渲染,作者想試一下用來寫后臺管理的界面感覺何如,可以開啟 spa模式,或者不改變,也會有不一樣的體驗哦.
基于nuxt.js的管理后臺項目,一個項目部署,可以一站式管理數據庫和你的業(yè)務的增刪改查操作,項目暫未完善,待完善后開源于github
一個問題,想了好多種辦法,終于用了一個笨方法解決了這個問題
如下所示：
routes.js 如下:
/**
* nuxt的路由菜單配置
* @description 僅僅只用于側邊欄的菜單顯示和權限,其它的不做任何功能
*/
const menus = [{
meta: {
requireAuth: false, //菜單權限
title: '系統(tǒng)首頁', //菜單名
icon: 'fa fa-bar-chart', //菜單圖標
},
path: "/dashboard",
name: "dashboard",
},
{
meta: {
requireAuth: false, //菜單權限
title: '歡迎頁', //菜單名
},
path: "Welcome",
name: "dashboard-Welcome"
},
{
meta: {
requireAuth: false, //菜單權限
title: '示例功能', //菜單名
icon: 'fa fa-bar-chart', //菜單圖標
},
path: "/demos",
name: "demos",
},
{
meta: {
requireAuth: false, //菜單權限
title: '列表Demo', //菜單名
},
path: "List",
name: "demos-List"
},
{
meta: {
requireAuth: false, //菜單權限
title: '列表詳情', //菜單名
},
path: "List/Detail/:id?",
name: "demos-List-Detail-id"
},
{
meta: {
requireAuth: false, //菜單權限
title: '數據分析', //菜單名
icon: 'fa fa-bar-chart', //菜單圖標
},
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 路由、過渡特效、中間件的實現(xiàn)代碼就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vue3+vite中開發(fā)環(huán)境與生產環(huán)境全局變量配置指南
最近在使用vite生成項目,這篇文章主要給大家介紹了關于vue3+vite中開發(fā)環(huán)境與生產環(huán)境全局變量配置的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-08-08
vue3使用elementPlus進行table合并處理的示例詳解
虛擬數據中公司下有多個客戶,公司一樣的客戶,公司列需要合并,客戶如果一樣也需要合并進行展示,所以本文給大家介紹了vue3使用elementPlus進行table合并處理的實例,文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下2024-02-02
雖然 vue-router 4 大多數 API 保持不變，但是在 vue3 中以插件形式存在，所以在使用時有一定的變化。接下來就學習學習它是如何使用的2021-11-11
這篇文章主要介紹了解決vue項目本地啟動時無法攜帶cookie,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-02-02
vue?this.$router.go(-1);返回時如何帶參數
這篇文章主要介紹了vue?this.$router.go(-1);返回時如何帶參數問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
顏色選擇和調色板是Web開發(fā)中常用的功能，Vue作為一個流行的JavaScript框架，可以方便地實現(xiàn)顏色選擇和調色板功能，本文講講如何在Vue中進行顏色選擇和調色板吧2023-06-06
這篇文章主要介紹了vue中是怎樣監(jiān)聽數組變化的，幫助大家更好的理解和學習vue，感興趣的朋友可以了解下2020-10-10
vue響應式系統(tǒng)之observe、watcher、dep的源碼解析
這篇文章主要介紹了vue響應式系統(tǒng)之observe、watcher、dep的源碼解析，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04
今天小編就為大家分享一篇vue 解決路由只變化參數頁面組件不更新問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要為大家介紹了vue篇之事件總線EventBus使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09