Vue let router-view display page operation method by default

Scene: A home page, click on the menu bar on the left, and the page is displayed on the right, so everyone knows to put a router-view on the right and then configure the route.

However, the problem occurs: when reopening, the default is white and empty.

Then the solution is:

In router management
Plusredirect:'/xxxx'

{
    path: '/home',
    name: 'Home',
    component: Home,
    meta: {
      requireAuth: true // Add this field to indicate that you need to log in to enter this route    },
    redirect:'/wxUser',
    children: [{
      path: '/admin',
      name: 'Backend User Management',
      component: Admin,
      meta: {
        requireAuth: true
      }
    },
      {
        path: '/wxUser',
        name: 'WeChat User Management',
        component: WxUser,
        meta: {
          requireAuth: true
        }
      }]
  }

Extensions:

vue-router default start interface

① Use redirect to write a route separately

  {
    path: "/",
    redirect: "/home",
  },
  {
    path: "/home",
    name: "home",
    component: () =&gt; import("../pages/Home/"), //This is lazy loading of routes, making access more efficient  },
  {
    path:"/login",
    name:"login",
    component: () =&gt; import("../pages/Login/"),
  }

② The initial page of router's children can be defined using redirect, or it can be as follows ①

 {
    path: "/helloworld",
    name: "HelloWorld",
    component: HelloWorld,
    //The default route is "/1" when entering    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,
      },
    ],
  },

This is the end of this article about Vue on how to make router-view display page by default. For more related Vue router-view display page content, please search for my previous article or continue browsing the related articles below. I hope everyone will support me in the future!