Vue讓router-view默認顯示頁面操作方法
更新時間：2024年03月22日 10:15:34 作者：發(fā)啊發(fā)程序猿
一個home頁面,點擊左邊的菜單欄,右邊顯示頁面,因此都知道在右邊放一個router-view然后配置路由即可,然而問題出現(xiàn)在：重新打開的時候,默認是白色空的,遇到這樣的問題如何解決呢,下面小編給大家分享Vue讓router-view默認顯示頁面操作方法,感興趣的朋友一起看看吧
Vue讓router-view默認顯示頁面操作方法
場景：一個home頁面，點擊左邊的菜單欄，右邊顯示頁面，因此都知道在右邊放一個router-view然后配置路由即可。
然而問題出現(xiàn)在：重新打開的時候，默認是白色空的。
那么解決辦法是：
在router管理的index.js中
加上 redirect:'/xxxx'
{
path: '/home',
name: 'Home',
component: Home,
meta: {
requireAuth: true // 添加該字段，表示進入這個路由是需要登錄的
},
redirect:'/wxUser',
children: [{
path: '/admin',
name: '后臺用戶管理',
component: Admin,
meta: {
requireAuth: true
}
},
{
path: '/wxUser',
name: '微信用戶管理',
component: WxUser,
meta: {
requireAuth: true
}
}]
}擴展：
vue-router默認的開始界面
①利用利用redirect單獨寫一個路由
{
path: "/",
redirect: "/home",
},
{
path: "/home",
name: "home",
component: () => import("../pages/Home/index.vue"), //這里是路由懶加載，使訪問更加高效
},
{
path:"/login",
name:"login",
component: () => import("../pages/Login/index.vue"),
}②router的children的初始頁面，可以用redirect定義初始頁面,也可以按①的方式
{
path: "/helloworld",
name: "HelloWorld",
component: HelloWorld,
//進入時默認路由為"/1"
redirect: "/1",
children: [
{
path: "/1",
name: "ahomepage",
component: ahomepage,
},
{
path: "/2",
name: "one",
component: one,
},
{
path: "/3",
name: "two",
component: two,
},
{
path: "/5",
name: "NodeApi",
component: NodeApi,
},
{
path: "/4",
name: "arcgis",
component: arcgis,
},
{
path: "/6",
name: "Try",
component: Try,
},
{
path: "/7",
name: "Echarts",
component: Echarts,
},
{
path: "/8",
name: "GeoGIS",
component: GeoGIS,
},
{
path: "/9",
name: "Less",
component: less,
},
],
},到此這篇關于Vue關于如何讓router-view默認顯示頁面問題的文章就介紹到這了,更多相關Vue router-view默認顯示頁面內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了如何使用WebStorm進行斷點調試,包括配置、啟動本地應用程序、設置斷點以及使用調試工具等步驟,文中通過圖文及代碼介紹的非常詳細,需要的朋友可以參考下2025-02-02
vue3中reactive數(shù)據(jù)被重新賦值后無法雙向綁定的解決
這篇文章主要介紹了vue3中reactive數(shù)據(jù)被重新賦值后無法雙向綁定的解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
vue動畫—通過鉤子函數(shù)實現(xiàn)半場動畫操作
這篇文章主要介紹了vue動畫—通過鉤子函數(shù)實現(xiàn)半場動畫操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue項目開發(fā)完畢后,我們需要將項目打包上線,同時我們希望可以在本地預覽生產(chǎn)環(huán)境項目,下面這篇文章主要給大家介紹了關于Vue項目部署上線的相關資料,需要的朋友可以參考下2023-03-03
這篇文章主要介紹了解決vue項目router切換太慢問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
本篇文章主要介紹了vue之nextTick全面解析，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
這篇文章主要介紹了vue+高德地圖寫地圖選址組件的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
vue-cli是一個官方發(fā)布vue.js項目腳手架,使用vue-cli可以快速創(chuàng)建vue項目。本文介紹了vue-cli4.5.x快速搭建項目，感興趣的可以了解一下2021-05-05
這篇文章主要給大家介紹了關于vue實戰(zhàn)中一些實用小魔法的相關資料,這些技巧和竅門,可以幫助你成為更好的Vue開發(fā)人員,需要的朋友可以參考下2021-06-06
vue3+ts中ref與reactive指定類型實現(xiàn)示例
這篇文章主要為大家介紹了vue3+ts中ref及reactive如何指定類型的實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-06-06