vue訪問(wèn)未定義的路由時(shí)重定向404問(wèn)題
vue訪問(wèn)未定義的路由時(shí)重定向404
我們?cè)谠L問(wèn)未配置的路由時(shí),就會(huì)出現(xiàn)一個(gè)空白界面,如何重定向404呢,廢話不多說(shuō),直接來(lái)方法。
- 第一種:官方路由守衛(wèi)。
- 第二種:可以在配置路由中配置 " * " ,對(duì)未進(jìn)行配置的路由進(jìn)行重定向。
第一種實(shí)現(xiàn)方法:使用路由守衛(wèi)進(jìn)行。
這種方法也可以實(shí)現(xiàn)404跳轉(zhuǎn),但是具有一定的局限性,如果路由配置的比較多的話,使用不太方便,這里就不介紹路由守衛(wèi)了,看一下官方文檔就很容易理解。
第二種:可以在配置路由中配置 " * " ,對(duì)未進(jìn)行配置的路由進(jìn)行重定向。
import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) ? let router = new VueRouter({ ? ? routes: [{ ? ? ? ? path: '/',? ? ? ? ? redirect: '/home'//重定向 ? ? }, ?{ ? ? ? ? path: '/home',//配置路徑 ? ? ? ? component: () => ? ? ? ? ? ? import ('../components/home'),//按需引入 ? ? },{ ? ? ? ? path: '/404', ? ? ? ? component: () => ? ? ? ? ? ? import ('../components/404') ? ? },{ ? ? ? ? path: '*',//匹配未定義的路由 ? ? ? ? redirect: '/404'//重定向 ? ? }] }) export default router
我在其他博客看到有的說(shuō)需要放在所有配置路由的最后一個(gè),但是我試了一下放在其他位置也是可以重定向到404頁(yè)面的,可能是我沒(méi)有發(fā)現(xiàn)到bug吧,那就放最后面也是一樣的。
vue.js 重定向和404等等相關(guān)的問(wèn)題?
- 1.進(jìn)入后就是默認(rèn) /
- 2.重定向 {path:'/',redirect:'home'}
- 3.重定向 {path:'/',redirect:{name:'home'}}【采用對(duì)象的方式:一勞永逸】
- 4.所謂404: 指在路由規(guī)則的最后的一個(gè)規(guī)則
- 寫上一個(gè)很強(qiáng)大的匹配規(guī)則
- {path:'*',component:notFoundVue}
相關(guān)文件代碼:
1. main.js文件
import Vue from 'vue'; import VueRouter from 'vue-router'; //引入主體(頁(yè)面初始化顯示) import App from './components/app.vue'; //一個(gè)個(gè)link對(duì)象 - 分類 import NotFound from './components/notFound.vue'; import Home from './components/home.vue'; //安裝插件 Vue.use(VueRouter);//掛載屬性 //創(chuàng)建路由對(duì)象并配置路由規(guī)則 /*let router = new VueRouter({ //routes routes: [ //一個(gè)個(gè)link對(duì)象 {name: 'music',path: '/music_country',component: Music}, {name: 'movie',path: '/movie',component: Movie} ] }); */ //和上述注釋代碼相同 let router = new VueRouter(); router.addRoutes([ //重定向 /*方法一 * {path:'/',redirect:'/home'}, {path:'/home',component:Home}*/ //方法二:一勞永逸 {path:'/',redirect:{name:'home'}}, {name:'home',path:'/home',component:Home}, //404:最終無(wú)法匹配-->404 {path:'*',component:NotFound} ]) //new Vue 啟動(dòng) :構(gòu)建vue實(shí)例 new Vue({ el: '#app', render: c => c(App), //讓vue知道我們的路由規(guī)則 router:router,//可以簡(jiǎn)寫為router })
2. app.vue文件
<template> <div> <div class="header"> 頭部 - 導(dǎo)航欄目 </div> <!--留坑,非常重要--> <router-view class="main"></router-view> <div class="footer">底部 - 版權(quán)信息</div> </div> </template> <script> export default { data(){ return{ } }, methods:{ } } </script> <style scoped> .header,.main,.footer{text-align: center;padding: 10px;} .header{height:70px;background: yellowgreen;} .main{height:300px;background: skyblue;} .footer{height: 100px;background: hotpink;} </style>
3. home.vue文件
<template> ?? ?<div> ?? ??? ?我是首頁(yè) ?? ?</div> </template> <script> ?? ?export default{ ?? ??? ?data(){ ?? ??? ??? ?return{ ?? ??? ??? ??? ? ?? ??? ??? ?} ?? ??? ?}, ?? ??? ?methods:{ ?? ??? ??? ?goback(){ ?? ??? ??? ??? ?this.$router.go(-1); ?? ??? ??? ?} ?? ??? ?} ?? ?} </script> <style scoped> ?? ?div{font-size: 30px;} </style>
4. notFound.vue文件
<template> ? <div> ? ?? ?您要訪問(wèn)的頁(yè)面出去旅游去了... ? </div> </template> <script> ?? ?export default { ?? ? ?data(){ ?? ? ? ?return{ ?? ? ? ?? ?? ? ? ?} ?? ? ?}, ?? ? ?methods:{ ?? ? ??? ? ?? ? ?} ?? ?} </script> <style scoped> </style>
以上就是“vue.js 重定向 和 404 等等相關(guān)的問(wèn)題”的簡(jiǎn)單講述,可以作為demo演示,了解一下。希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- vue使用動(dòng)態(tài)添加路由(router.addRoutes)加載權(quán)限側(cè)邊欄的方式
- vue 解決addRoutes多次添加路由重復(fù)的操作
- vue addRoutes路由動(dòng)態(tài)加載操作
- 使用VueRouter的addRoutes方法實(shí)現(xiàn)動(dòng)態(tài)添加用戶的權(quán)限路由
- vue動(dòng)態(tài)添加路由addRoutes之不能將動(dòng)態(tài)路由存入緩存的解決
- vue 解決addRoutes動(dòng)態(tài)添加路由后刷新失效問(wèn)題
- vue addRoutes實(shí)現(xiàn)動(dòng)態(tài)權(quán)限路由菜單的示例
- vue-router+vuex addRoutes實(shí)現(xiàn)路由動(dòng)態(tài)加載及菜單動(dòng)態(tài)加載
- vue-router4動(dòng)態(tài)路由刷新404/白屏的解決
- vue3動(dòng)態(tài)路由刷新后空白或者404問(wèn)題的解決
- vue 項(xiàng)目中當(dāng)訪問(wèn)路由不存在的時(shí)候默認(rèn)訪問(wèn)404頁(yè)面操作
- vue?使用addRoutes動(dòng)態(tài)添加路由及刷新頁(yè)面跳轉(zhuǎn)404路由的問(wèn)題解決方案
相關(guān)文章
Vue首頁(yè)界面加載優(yōu)化實(shí)現(xiàn)方法詳解
如果你也遇到在 vue 應(yīng)用中,首頁(yè)加載資源過(guò)多,導(dǎo)致加載緩慢的問(wèn)題,下面的方法也許能幫到你,主要的處理思想是:讓首頁(yè)多余的資源能在需要它的時(shí)候再加載2022-09-09Vue 3 + Element Plus樹(shù)形表格全選多選及子節(jié)點(diǎn)勾選的問(wèn)題解決方
在本文中,我們解決了Vue 3和Element Plus樹(shù)形表格中的全選、多選、子節(jié)點(diǎn)勾選和父節(jié)點(diǎn)勾選等常見(jiàn)問(wèn)題,通過(guò)逐步實(shí)現(xiàn)這些功能,您可以構(gòu)建功能強(qiáng)大且用戶友好的樹(shù)形表格組件,以滿足各種數(shù)據(jù)展示需求,對(duì)Vue 3 Element Plus樹(shù)形表格相關(guān)知識(shí)感興趣的朋友一起看看吧2023-12-12vue3點(diǎn)擊出現(xiàn)彈窗后背景變暗且不可操作的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue3點(diǎn)擊出現(xiàn)彈窗后背景變暗且不可操作的實(shí)現(xiàn)代碼,本文通過(guò)實(shí)例代碼圖文相結(jié)合給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-08-08關(guān)于Vue?"__ob__:Observer"屬性的解決方案詳析
在操作數(shù)據(jù)的時(shí)候發(fā)現(xiàn),__ob__: Observer這個(gè)屬性出現(xiàn)之后,如果單獨(dú)拿數(shù)據(jù)的值,就會(huì)返回undefined,下面這篇文章主要給大家介紹了關(guān)于Vue?"__ob__:Observer"屬性的解決方案,需要的朋友可以參考下2022-11-11vue中解決拖拽改變存在iframe的div大小時(shí)卡頓問(wèn)題
這篇文章主要介紹了vue中解決拖拽改變存在iframe的div大小時(shí)卡頓問(wèn)題,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07vue實(shí)現(xiàn)商城秒殺倒計(jì)時(shí)功能
這篇文章主要介紹了vue實(shí)現(xiàn)商城秒殺倒計(jì)時(shí)功能,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-12-12