Vue让router-view默认显示页面操作方法
作者：发啊发程序猿
一个home页面,点击左边的菜单栏,右边显示页面,因此都知道在右边放一个router-view然后配置路由即可,然而问题出现在：重新打开的时候,默认是白色空的,遇到这样的问题如何解决呢,下面小编给大家分享Vue让router-view默认显示页面操作方法,感兴趣的朋友一起看看吧
Vue让router-view默认显示页面操作方法
场景：一个home页面，点击左边的菜单栏，右边显示页面，因此都知道在右边放一个router-view然后配置路由即可。
然而问题出现在：重新打开的时候，默认是白色空的。
那么解决办法是：
在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默认显示页面内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！