Vue让router-view默认显示页面操作方法

 更新时间:2024年03月22日 10:15:34   作者:发啊发程序猿  
一个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默认显示页面内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 一文详解WebStorm如何调试Vue项目

    一文详解WebStorm如何调试Vue项目

    这篇文章主要介绍了如何使用WebStorm进行断点调试,包括配置、启动本地应用程序、设置断点以及使用调试工具等步骤,文中通过图文及代码介绍的非常详细,需要的朋友可以参考下
    2025-02-02
  • vue3中reactive数据被重新赋值后无法双向绑定的解决

    vue3中reactive数据被重新赋值后无法双向绑定的解决

    这篇文章主要介绍了vue3中reactive数据被重新赋值后无法双向绑定的解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • vue动画—通过钩子函数实现半场动画操作

    vue动画—通过钩子函数实现半场动画操作

    这篇文章主要介绍了vue动画—通过钩子函数实现半场动画操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • Vue项目部署上线全过程记录(保姆级教程)

    Vue项目部署上线全过程记录(保姆级教程)

    vue项目开发完毕后,我们需要将项目打包上线,同时我们希望可以在本地预览生产环境项目,下面这篇文章主要给大家介绍了关于Vue项目部署上线的相关资料,需要的朋友可以参考下
    2023-03-03
  • 解决vue项目router切换太慢问题

    解决vue项目router切换太慢问题

    这篇文章主要介绍了解决vue项目router切换太慢问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • vue之nextTick全面解析

    vue之nextTick全面解析

    本篇文章主要介绍了vue之nextTick全面解析,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • vue+高德地图写地图选址组件的方法

    vue+高德地图写地图选址组件的方法

    这篇文章主要介绍了vue+高德地图写地图选址组件的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • vue-cli4.5.x快速搭建项目

    vue-cli4.5.x快速搭建项目

    vue-cli是一个官方发布vue.js项目脚手架,使用vue-cli可以快速创建vue项目。本文介绍了vue-cli4.5.x快速搭建项目,感兴趣的可以了解一下
    2021-05-05
  • vue实战中的一些实用小魔法汇总

    vue实战中的一些实用小魔法汇总

    这篇文章主要给大家介绍了关于vue实战中一些实用小魔法的相关资料,这些技巧和窍门,可以帮助你成为更好的Vue开发人员,需要的朋友可以参考下
    2021-06-06
  • vue3+ts中ref与reactive指定类型实现示例

    vue3+ts中ref与reactive指定类型实现示例

    这篇文章主要为大家介绍了vue3+ts中ref及reactive如何指定类型的实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-06-06

最新评论