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默认显示页面内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 利用vue-i18n实现多语言切换效果的方法

    利用vue-i18n实现多语言切换效果的方法

    这篇文章主要给大家介绍了关于利用vue-i18n实现多语言切换效果的方法,文中通过示例代码介绍的非常详细,对大家学习或者使用vue-i18n具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-06-06
  • uniapp中app与webview的通讯代码示例

    uniapp中app与webview的通讯代码示例

    这篇文章主要给大家介绍了关于uniapp中app与webview通讯的相关资料,这里的通信主要是打包APP端和web-view内嵌网页的双向通信,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-03-03
  • 基于Vue3+TypeScript的全局对象的注入和使用详解

    基于Vue3+TypeScript的全局对象的注入和使用详解

    这篇文章主要介绍了基于Vue3+TypeScript的全局对象的注入和使用,本篇随笔主要介绍一下基于Vue3+TypeScript的全局对象的注入和使用,需要的朋友可以参考下
    2022-09-09
  • vue中计算属性和方法的区别及说明

    vue中计算属性和方法的区别及说明

    这篇文章主要介绍了vue中计算属性和方法的区别及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • vue的axios请求改变content-type为form-data问题

    vue的axios请求改变content-type为form-data问题

    这篇文章主要介绍了vue的axios请求改变content-type为form-data问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • Vue3中实现代码高亮的两种方法(prismjs和highlight.js)

    Vue3中实现代码高亮的两种方法(prismjs和highlight.js)

    最近忙着开发自己的博客系统,在做界面展示的时候,需要让代码高亮,于是经过在网上查阅,发现有两款比较好用的插件实现代码高亮,分别是prismjs和highlight.js,下面我分别介绍下,方便给需要的同学参考
    2025-04-04
  • vuex mutation action同级调用方式

    vuex mutation action同级调用方式

    这篇文章主要介绍了vuex mutation action同级调用方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03
  • vue实现点击按钮“查看详情”弹窗展示详情列表操作

    vue实现点击按钮“查看详情”弹窗展示详情列表操作

    这篇文章主要介绍了vue实现点击按钮“查看详情”弹窗展示详情列表操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • VUE使用axios调用后台API接口的方法

    VUE使用axios调用后台API接口的方法

    这篇文章主要介绍了VUE使用axios调用后台API接口的方法,文中讲解非常细致,代码帮助大家更好的理解和学习,感兴趣的朋友可以了解下
    2020-08-08
  • VsCode工具开发vue项目必装插件清单(推荐!)

    VsCode工具开发vue项目必装插件清单(推荐!)

    对于很多使用vscode编写vue项目的新手同学来说,可能不知道使用什么插件,下面这篇文章主要给大家介绍了关于VsCode工具开发vue项目必装插件的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2022-09-09

最新评论