nuxt 路由、過渡特效、中間件的實(shí)現(xiàn)代碼
在pages下的文件.vue文件會被自動加載成路由
0、聲明式導(dǎo)航
<nuxt-link to="/">首頁</nuxt-link>
用法和router-link用法一致
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ù)驗(yàn)證
和data同級
validate({params}) {
console.log(params.鍵名);
// 如果校驗(yàn)方法返回的值不為 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中添加路由擴(kuò)展配置
router: {
extendRoutes(routes, resolve) {
//查找要使用命名視圖的組件,獲取index
const index = routes.findIndex(route => route.name === '路由名稱')
routes[index] = {
//將查找的路由之前配置解構(gòu)
...routes[index],
//添加components和chunkNames擴(kuò)展路由配置來使用命名路由
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ù)運(yùn)行在一個頁面或一組頁面渲染之前。
(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中配置成全局或單獨(dú)配置組件
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'
}
補(bǔ)充知識：nuxt 設(shè)置路由的meta屬性,nuxt 怎么設(shè)置路由的meta,nuxt 怎么設(shè)置router的meta
nuxt 官網(wǎng)說的 專注于UI的渲染,作者想試一下用來寫后臺管理的界面感覺何如,可以開啟 spa模式,或者不改變,也會有不一樣的體驗(yàn)哦.
基于nuxt.js的管理后臺項(xiàng)目,一個項(xiàng)目部署,可以一站式管理數(shù)據(jù)庫和你的業(yè)務(wù)的增刪改查操作,項(xiàng)目暫未完善,待完善后開源于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?",
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: { //中間件允許您定義一個自定義函數(shù)運(yùn)行在一個頁面或一組頁面渲染之前。
middleware: ['authorities'],
extendRoutes: routes
},
這個問題暫時得到了解決,可以根據(jù)routes生成標(biāo)簽導(dǎo)航/側(cè)邊欄菜單/面包屑導(dǎo)航等:
以上這篇nuxt 路由、過渡特效、中間件的實(shí)現(xiàn)代碼就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)頁面添加水印效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了vue.js整合mint-ui里的輪播圖的方法,首先我們需要初始化vue項(xiàng)目，然后安裝mint-ui。具體內(nèi)容詳情大家通過學(xué)習(xí)2017-12-12
計(jì)算屬性是Vue中比較好用的API，開發(fā)者可以利用計(jì)算屬將復(fù)雜的計(jì)算進(jìn)行緩存，同時基于它的響應(yīng)式特性，我們無需關(guān)注數(shù)據(jù)更新問題，但需要注意的是，計(jì)算屬性是惰性求值的，本文將詳細(xì)介紹計(jì)算屬性的實(shí)現(xiàn)原理,需要的朋友可以參考下2023-05-05
Vue實(shí)現(xiàn)指令式動態(tài)追加小球動畫組件的步驟
這篇文章主要介紹了Vue實(shí)現(xiàn)指令式動態(tài)追加小球動畫組件的步驟，幫助大家更好的理解和實(shí)用vue，感興趣的朋友可以了解下2020-12-12
這篇文章主要介紹了vue如何解決空格和空行報(bào)錯的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教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來部署前端項(xiàng)目,需要的朋友可以參考下2024-03-03
vue跳轉(zhuǎn)頁面攜帶參數(shù)并且立即執(zhí)行方法
這篇文章主要介紹了vue跳轉(zhuǎn)頁面攜帶參數(shù)并且立即執(zhí)行方法,首先定義跳轉(zhuǎn)函數(shù),結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2023-10-10
這篇文章主要介紹了聊聊vue 中的v-on參數(shù)問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2021-01-01
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)表格分頁功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
在現(xiàn)代Web應(yīng)用中,步驟條作為一種常見的UI組件,廣泛應(yīng)用于表單提交、任務(wù)進(jìn)度以及多步驟操作等場景,下面我們來看看如何利用Vue實(shí)現(xiàn)一個蛇形步驟條吧2024-11-11