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ù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: