nuxt 路由、過(guò)渡特效、中間件的實(shí)現(xiàn)代碼
在pages下的文件.vue文件會(huì)被自動(dòng)加載成路由
0、聲明式導(dǎo)航
<nuxt-link to="/">首頁(yè)</nuxt-link>
用法和router-link用法一致
1、定義一級(jí)路由
在pages下創(chuàng)建.vue文件,訪問(wèn)路徑后加上/文件名,訪問(wèn)
index.vue對(duì)應(yīng)的路徑為'/';
2、創(chuàng)建多級(jí)路由
在pages創(chuàng)建文件夾,文件夾內(nèi)創(chuàng)建.vue文件
訪問(wèn)路徑:/文件夾名/文件名
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、動(dòng)態(tài)路由參數(shù)
以一個(gè)_下劃線作為前綴的Vue文件或目錄。
獲取參數(shù)this.$route.params.鍵名 _名稱(chēng)會(huì)變成/:名稱(chēng)
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、動(dòng)態(tài)路由參數(shù)驗(yàn)證
和data同級(jí)
validate({params}) {
console.log(params.鍵名);
// 如果校驗(yàn)方法返回的值不為 true或Promise中 resolve 解析為false或拋出 Error ， Nuxt.js 將自動(dòng)加載顯示 404 錯(cuò)誤頁(yè)面或 500 錯(cuò)誤頁(yè)面。
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中的名稱(chēng)"/> 或 <nuxt-child name="components中的名稱(chēng)"/>
在nuxt.config.js中添加路由擴(kuò)展配置
router: {
extendRoutes(routes, resolve) {
//查找要使用命名視圖的組件,獲取index
const index = routes.findIndex(route => route.name === '路由名稱(chēng)')
routes[index] = {
//將查找的路由之前配置解構(gòu)
...routes[index],
//添加components和chunkNames擴(kuò)展路由配置來(lái)使用命名路由
components: {
default: routes[index].component,
//自定義名稱(chēng): resolve(__dirname, '顯示的組件路徑/.vue')
},
chunkNames: {
//自定義名稱(chēng): '顯示的組件路徑/.vue'
}
}
}
}
7、過(guò)渡動(dòng)效
(1)全局過(guò)渡動(dòng)效
讓每一個(gè)頁(yè)面的切換都有淡出 (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)某個(gè)頁(yè)面自定義過(guò)渡特效
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同級(jí)
transition: 'test'
8、中間件
中間件允許定義一個(gè)自定義函數(shù)運(yùn)行在一個(gè)頁(yè)面或一組頁(yè)面渲染之前。
(1)在middleware文件夾下創(chuàng)建.js文件,文件名的名稱(chēng)為中間件名稱(chēng)
export default function(context){
//接收一個(gè)context上下文對(duì)象作為參數(shù)
...
//context.route可獲取路由信息
}
異步中間件:返回Promise即可
(2)在每個(gè)頁(yè)面執(zhí)行中間件
nuxt.config.js中添加
router: {
middleware: '中間件名稱(chēng)'
}
}
(3)指定的布局或者頁(yè)面
組件中與data同級(jí),添加:
middleware: '中間件名稱(chēng)'
9、路由重定向
方式一:
組件中
asyncData(context, callback) {
context.redirect('/');
},
方式二:
定義中間件
export default function(context)
{
if(context.isHMR)
{
return; 避免熱更新時(shí),重新走一遍
}
if(context.route.fullPath==='/xxx)
{
context.redirect('/x')
}
}
將中間件在nuxt.config.js中配置成全局或單獨(dú)配置組件
10、路由高亮
方式一:
router: {
linkActiveClass: 'active-link'或
linkExactActiveClass: 'exact-active-link'
}
方式二：
直接添加類(lèi)名,style不能有scoped屬性
.nuxt-link-exact-active 父路由不高亮
.nuxt-link-active 父路由也會(huì)高亮
方式三:
每個(gè)nuxt-link標(biāo)簽上添加activeClass=‘類(lèi)',再定義類(lèi)的樣式
11、配置路由模式
在nuxt.config.js中
router:{
mode:'hash'
}
補(bǔ)充知識(shí)：nuxt 設(shè)置路由的meta屬性,nuxt 怎么設(shè)置路由的meta,nuxt 怎么設(shè)置router的meta
nuxt 官網(wǎng)說(shuō)的 專(zhuān)注于UI的渲染,作者想試一下用來(lái)寫(xiě)后臺(tái)管理的界面感覺(jué)何如,可以開(kāi)啟 spa模式,或者不改變,也會(huì)有不一樣的體驗(yàn)哦.
基于nuxt.js的管理后臺(tái)項(xiàng)目,一個(gè)項(xiàng)目部署,可以一站式管理數(shù)據(jù)庫(kù)和你的業(yè)務(wù)的增刪改查操作,項(xiàng)目暫未完善,待完善后開(kāi)源于github
一個(gè)問(wèn)題,想了好多種辦法,終于用了一個(gè)笨方法解決了這個(gè)問(wèn)題
如下所示：
routes.js 如下:
/**
* nuxt的路由菜單配置
* @description 僅僅只用于側(cè)邊欄的菜單顯示和權(quán)限,其它的不做任何功能
*/
const menus = [{
meta: {
requireAuth: false, //菜單權(quán)限
title: '系統(tǒng)首頁(yè)', //菜單名
icon: 'fa fa-bar-chart', //菜單圖標(biāo)
},
path: "/dashboard",
name: "dashboard",
},
{
meta: {
requireAuth: false, //菜單權(quán)限
title: '歡迎頁(yè)', //菜單名
},
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?",
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);
};
然后設(shè)置nuxt.config.js
nuxt.config.js 如下配置:
router: { //中間件允許您定義一個(gè)自定義函數(shù)運(yùn)行在一個(gè)頁(yè)面或一組頁(yè)面渲染之前。
middleware: ['authorities'],
extendRoutes: routes
},
這個(gè)問(wèn)題暫時(shí)得到了解決,可以根據(jù)routes生成標(biāo)簽導(dǎo)航/側(cè)邊欄菜單/面包屑導(dǎo)航等:
以上這篇nuxt 路由、過(guò)渡特效、中間件的實(shí)現(xiàn)代碼就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)頁(yè)面添加水印效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了vue.js整合mint-ui里的輪播圖的方法,首先我們需要初始化vue項(xiàng)目，然后安裝mint-ui。具體內(nèi)容詳情大家通過(guò)學(xué)習(xí)2017-12-12
計(jì)算屬性是Vue中比較好用的API，開(kāi)發(fā)者可以利用計(jì)算屬將復(fù)雜的計(jì)算進(jìn)行緩存，同時(shí)基于它的響應(yīng)式特性，我們無(wú)需關(guān)注數(shù)據(jù)更新問(wèn)題，但需要注意的是，計(jì)算屬性是惰性求值的，本文將詳細(xì)介紹計(jì)算屬性的實(shí)現(xiàn)原理,需要的朋友可以參考下2023-05-05
Vue實(shí)現(xiàn)指令式動(dòng)態(tài)追加小球動(dòng)畫(huà)組件的步驟
這篇文章主要介紹了Vue實(shí)現(xiàn)指令式動(dòng)態(tài)追加小球動(dòng)畫(huà)組件的步驟，幫助大家更好的理解和實(shí)用vue，感興趣的朋友可以了解下2020-12-12
vue如何解決空格和空行報(bào)錯(cuò)的問(wèn)題
這篇文章主要介紹了vue如何解決空格和空行報(bào)錯(cuò)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Ubuntu22.04使用nginx部署vue前端項(xiàng)目的詳細(xì)教程
這篇文章主要給大家介紹了關(guān)于Ubuntu22.04使用nginx部署vue前端項(xiàng)目的詳細(xì)教程,使用nginx部署前端項(xiàng)目是一篇非常詳細(xì)的教程,旨在幫助初學(xué)者使用Nginx來(lái)部署前端項(xiàng)目,需要的朋友可以參考下2024-03-03
vue跳轉(zhuǎn)頁(yè)面攜帶參數(shù)并且立即執(zhí)行方法
這篇文章主要介紹了vue跳轉(zhuǎn)頁(yè)面攜帶參數(shù)并且立即執(zhí)行方法,首先定義跳轉(zhuǎn)函數(shù),結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2023-10-10
這篇文章主要介紹了聊聊vue 中的v-on參數(shù)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2021-01-01
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)表格分頁(yè)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
基于Vue實(shí)現(xiàn)一個(gè)"蛇形"步驟條
在現(xiàn)代Web應(yīng)用中,步驟條作為一種常見(jiàn)的UI組件,廣泛應(yīng)用于表單提交、任務(wù)進(jìn)度以及多步驟操作等場(chǎng)景,下面我們來(lái)看看如何利用Vue實(shí)現(xiàn)一個(gè)蛇形步驟條吧2024-11-11