vue訪問未定義的路由時重定向404問題

更新時間：2022年10月09日 09:14:35 作者：web大白

這篇文章主要介紹了vue訪問未定義的路由時重定向404問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue訪問未定義的路由時重定向404

我們在訪問未配置的路由時，就會出現(xiàn)一個空白界面，如何重定向404呢，廢話不多說，直接來方法。

第一種：官方路由守衛(wèi)。
第二種：可以在配置路由中配置 " * " ，對未進行配置的路由進行重定向。

第一種實現(xiàn)方法：使用路由守衛(wèi)進行。

這種方法也可以實現(xiàn)404跳轉(zhuǎn)，但是具有一定的局限性，如果路由配置的比較多的話，使用不太方便，這里就不介紹路由守衛(wèi)了，看一下官方文檔就很容易理解。

第二種：可以在配置路由中配置 " * " ，對未進行配置的路由進行重定向。

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

我在其他博客看到有的說需要放在所有配置路由的最后一個，但是我試了一下放在其他位置也是可以重定向到404頁面的，可能是我沒有發(fā)現(xiàn)到bug吧，那就放最后面也是一樣的。

vue.js 重定向和404等等相關的問題？

1.進入后就是默認 /
2.重定向 {path:'/',redirect:'home'}
3.重定向 {path:'/',redirect:{name:'home'}}【采用對象的方式：一勞永逸】
4.所謂404：指在路由規(guī)則的最后的一個規(guī)則

- 寫上一個很強大的匹配規(guī)則

- {path:'*',component:notFoundVue}

相關文件代碼：

1. main.js文件

import Vue from 'vue';
import VueRouter from 'vue-router';
//引入主體（頁面初始化顯示）
import App from './components/app.vue';
//一個個link對象 - 分類
import NotFound from './components/notFound.vue';
import Home from './components/home.vue';
//安裝插件
Vue.use(VueRouter);//掛載屬性
//創(chuàng)建路由對象并配置路由規(guī)則
/*let router = new VueRouter({
	//routes
	routes: [
	//一個個link對象
    {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：最終無法匹配-->404
	{path:'*',component:NotFound}
])
//new Vue 啟動 :構建vue實例
new Vue({
  el: '#app',
  render: c => c(App),
  //讓vue知道我們的路由規(guī)則
  router:router,//可以簡寫為router
})

2. app.vue文件

<template>
  <div>
  	<div class="header">
  		頭部 - 導航欄目
  	</div>
  	
  	<!--留坑，非常重要-->
		<router-view class="main"></router-view>
		
		
		<div class="footer">底部 - 版權信息</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>
?? ??? ?我是首頁
?? ?</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>
? ?? ?您要訪問的頁面出去旅游去了...
? </div>
</template>
<script>
?? ?export default {
?? ? ?data(){
?? ? ? ?return{
?? ? ? ??
?? ? ? ?}
?? ? ?},
?? ? ?methods:{
?? ? ??? ?
?? ? ?}
?? ?}
</script>
<style scoped>
</style>

以上就是“vue.js 重定向和 404 等等相關的問題”的簡單講述，可以作為demo演示，了解一下。希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

詳解Vue項目在其他電腦npm run dev運行報錯的解決方法
這篇文章主要介紹了詳解Vue項目在其他電腦npm run dev運行報錯的解決方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-10-10
electron?dialog.showMessageBox的使用案例
Electron?Dialog?模塊提供了api來展示原生的系統(tǒng)對話框,本文主要介紹了electron?dialog.showMessageBox的使用案例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
2023-08-08
Vue.js雙向綁定操作技巧(初級入門)
這篇文章主要介紹了Vue.js雙向綁定操作技巧(初級入門)的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2016-12-12
Vue不能下載xls以及文件亂碼問題解決
最近工作中遇到了一些問題,通過查找相關資料終于找到了相關的解決方法,這篇文章主要給大家介紹了關于Vue不能下載xls以及文件亂碼問題解決的相關資料,需要的朋友可以參考下
2022-04-04
vue?filter的幾種用法示例小結
Vue.filter函數(shù)用于注冊一個全局的過濾器,該過濾器可以在模板和組件中使用,這篇文章主要介紹了vue?filter的幾種用法示例小結,需要的朋友可以參考下
2024-08-08
vue實現(xiàn)一個懶加載的樹狀表格實例
這篇文章主要介紹了vue實現(xiàn)一個懶加載的樹狀表格實例，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-05-05
vue3使用defineModel實現(xiàn)父子組件雙向綁定
這篇文章主要個給大家介紹了在vue3中使用defineModel進行父子組件中的雙向綁定,文中通過代碼示例給大家介紹的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下
2024-01-01
ElementPlus el-message-box樣式錯位問題及解決
這篇文章主要介紹了ElementPlus el-message-box樣式錯位問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-09-09
單頁面Vue頁面刷新出現(xiàn)閃爍問題及解決
這篇文章主要介紹了單頁面Vue頁面刷新出現(xiàn)閃爍問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-07-07
vue3+pinia的快速入門使用教程
Pinia是Vue的一個存儲庫,它允許你跨組件/頁面共享狀態(tài),下面這篇文章主要給大家介紹了關于vue3+pinia的快速入門使用,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2022-07-07