快捷導(dǎo)航

Vue讓router-view默認(rèn)顯示頁(yè)面操作方法

更新時(shí)間：2024年03月22日 10:15:34 作者：發(fā)啊發(fā)程序猿

一個(gè)home頁(yè)面,點(diǎn)擊左邊的菜單欄,右邊顯示頁(yè)面,因此都知道在右邊放一個(gè)router-view然后配置路由即可,然而問(wèn)題出現(xiàn)在：重新打開(kāi)的時(shí)候,默認(rèn)是白色空的,遇到這樣的問(wèn)題如何解決呢,下面小編給大家分享Vue讓router-view默認(rèn)顯示頁(yè)面操作方法,感興趣的朋友一起看看吧

Vue讓router-view默認(rèn)顯示頁(yè)面操作方法

場(chǎng)景：一個(gè)home頁(yè)面，點(diǎn)擊左邊的菜單欄，右邊顯示頁(yè)面，因此都知道在右邊放一個(gè)router-view然后配置路由即可。

然而問(wèn)題出現(xiàn)在：重新打開(kāi)的時(shí)候，默認(rèn)是白色空的。

那么解決辦法是：

在router管理的index.js中
加上 redirect:'/xxxx'

{
    path: '/home',
    name: 'Home',
    component: Home,
    meta: {
      requireAuth: true // 添加該字段，表示進(jìn)入這個(gè)路由是需要登錄的
    },
    redirect:'/wxUser',
    children: [{
      path: '/admin',
      name: '后臺(tái)用戶管理',
      component: Admin,
      meta: {
        requireAuth: true
      }
    },
      {
        path: '/wxUser',
        name: '微信用戶管理',
        component: WxUser,
        meta: {
          requireAuth: true
        }
      }]
  }

擴(kuò)展：

vue-router默認(rèn)的開(kāi)始界面

①利用利用redirect單獨(dú)寫(xiě)一個(gè)路由

  {
    path: "/",
    redirect: "/home",
  },
  {
    path: "/home",
    name: "home",
    component: () => import("../pages/Home/index.vue"), //這里是路由懶加載，使訪問(wèn)更加高效
  },
  {
    path:"/login",
    name:"login",
    component: () => import("../pages/Login/index.vue"),
  }

②router的children的初始頁(yè)面，可以用redirect定義初始頁(yè)面,也可以按①的方式

 {
    path: "/helloworld",
    name: "HelloWorld",
    component: HelloWorld,
    //進(jìn)入時(shí)默認(rèn)路由為"/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,
      },
    ],
  },

到此這篇關(guān)于Vue關(guān)于如何讓router-view默認(rèn)顯示頁(yè)面問(wèn)題的文章就介紹到這了,更多相關(guān)Vue router-view默認(rèn)顯示頁(yè)面內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: