Vue3:用重定向方式,解决No match found for location with path “/“问题

news2024/11/20 7:01:38

一、情景说明

在初学Vue3的项目中,我们配置了路由后,页面会告警
如下图:
在这里插入图片描述
具体含义就是,没有配置"/"路径对应的路由组件

二、解决

关键配置:redirect

const router = createRouter({
  history:createWebHistory(), //路由器的工作模式(稍后讲解)
  routes:[ //一个一个的路由规则
    {
      name:'zhuye',
      path:'/home',
      component:Home
    },
    {
      name:'xinwen',
      path:'/news',
      component:News,
      children:[
        {
          name:'xiang',
          path:'detail',
          component:Detail,
          props(route){
            return route.query
          }
        }
      ]
    },
    {
      name:'guanyu',
      path:'/about',
      component:About
    },
    {
      path:'/',
      redirect:'/home'
    }
  ]
})

这样,一访问页面,就自动重定向到/home路径对应的页面

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1539811.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

P1246 编码题解

题目 编码工作常被运用于密文或压缩传输。这里我们用一种最简单的编码方式进行编码:把一些有规律的单词编成数字。 字母表中共有26个字母a,b,c,⋯,z,这些特殊的单词长度不超过6且字母按升序排列。把所有这样的单词放在一起,按字典顺序排列&…

【docker系列】深入理解 Docker 容器管理与清理

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

C语言内存函数(1)【memcpy函数的使用与模拟实现】【memmove函数的使用和模拟实现】

关于内存函数有四个函数需要我们学习。分别是memcpy,memmove,memset和memcmp。都在头文件string.h里面。 一.memcpy函数的使用 一提到这个函数,我们可能会联想到strcpy函数,但strcpy函数是针对字符串的拷贝。但是我们在写代码的…

Docker学习笔记 - 基本概念

一. 什么是“容器”(container)和“镜像”(Image) 所谓“容器”可以理解为一个模拟操作系统的虚拟层,大部分是基于Linux的,应用程序及其配置信息,依赖库可以打包成一个Image独立运行在这个虚拟…

双指针算法:三数之和

文章目录 一、[题目链接&#xff1a;三数之和](https://leetcode.cn/problems/3sum/submissions/515727749/)二、思路讲解三、代码演示 先赞后看&#xff0c;养成习惯&#xff01;&#xff01;&#xff01;^ _ ^<3 ❤️ ❤️ ❤️ 码字不易&#xff0c;大家的支持就是我坚持…

【LeetCode】升级打怪之路 Day 28:回溯算法 — 括号生成 删除无效的括号

今日题目&#xff1a; 22. 括号生成301. 删除无效的括号 参考文章&#xff1a; 回溯算法&#xff1a;括号生成回溯算法&#xff1a;删除无效的括号 这是两道使用回溯算法来解决与括号相关的问题&#xff0c;具备一定的难度&#xff0c;需要学习理解。 通过第一道题“括号生成”…

第十届蓝桥杯大赛个人赛省赛(软件类)真题- CC++ 研究生组-字串数字

3725573269 #include<iostream> #include<map> #include<string> using namespace std; int main(){map<char, int> mp;string s "LANQIAO";long long ans 0, power 1;//7位数的26进制可能会超过int范围for(int i 1; i < 26; i){mp.…

Visual Studio 2013 - 高亮设置突出显示的引用

Visual Studio 2013 - 高亮设置突出显示的引用 1. 高亮设置 突出显示的引用References 1. 高亮设置 突出显示的引用 工具 -> 选项… -> 环境 -> 字体和颜色 References [1] Yongqiang Cheng, https://yongqiang.blog.csdn.net/

前端项目,个人笔记(五)【图片懒加载 + 路由配置 + 面包屑 + 路由行为修改】

目录 1、图片懒加载 步骤一&#xff1a;自定义全局指令 步骤二&#xff1a;代码中使用 ​编辑步骤三&#xff1a;效果查看 步骤四&#xff1a;代码优化 2、封装组件案例-传对象 3、路由配置——tab标签 4、根据tab标签添加面包屑 4.1、实现 4.2、bug&#xff1a;需要…

使用 ReclaiMe Pro 查找并恢复网络中的 SSH 服务器数据

天津鸿萌科贸发展有限公司是 ReclaiMe Pro 数据恢复软件的授权代理商。ReclaiMe Pro 数据恢复软件专注于恢复几乎所有文件系统及各种类型和复杂程度的 RAID 阵列。 在本文中&#xff0c;我们介绍 ReclaiMe Pro 对于采用 SSH 连接方式的网络服务器中数据的恢复方法。 ReclaiMe…

接口测试前需要了解的网路基础知识

在面试时&#xff0c;不管是面试功能测试、自动化测试、测试开发以及性能测试&#xff0c;都会问到计算机网络基础相关知识。今天主要介绍一些高频的网络基础面试题目&#xff0c;如果觉得有帮助&#xff0c;欢迎点赞、转发、收藏三连击。 Cookie和Session的区别&#xff1f; …

数据结构系列-算法的时间复杂度算法效率

&#x1f308;个人主页&#xff1a;会编程的果子君 &#x1f4ab;个人格言:“成为自己未来的主人~” 算法效率 如何衡量一个算法的好坏 如何衡量一个算法的好坏&#xff0c;比如对于以下斐波那契数列&#xff1a; #define _CRT_SECURE_NO_WARNINGS #include<stdio.h&…

阿里云优惠券在哪里领取?

随着云计算技术的快速发展&#xff0c;越来越多的企业和个人开始选择使用云服务来满足他们的数据存储、计算、网络等需求。阿里云作为国内领先的云计算服务提供商&#xff0c;一直以其稳定、高效、安全的服务赢得了广大用户的信赖。而在购买阿里云产品时&#xff0c;使用优惠券…

mysql之基本概念与安装

一 数据库的基本概念 1.1 数据 记录个体的信息 1.2 表 存放信息的集合&#xff0c;行于与列 1.3 数据库 数据库就是表的集合。它是以一定的组织方式存储的相互有关的数据集合 1.4 数据库管理系统 数据库管理系统&#xff08;DatabaseManagementSystem&#xff0c;DBMS&…

如何申请香港信用卡?

第一种方法就是申请香港的虚拟卡 在线上申请&#xff0c;方便快捷&#xff0c;下卡快&#xff0c;可以绑定香港apple id&#xff0c;香港paypal等等 点击获取线上香港信用卡 第二种线下办理方法 如何申请香港个人卡 香港个人银行卡(等同于大陆的借记卡9)&#xff0c;开户限制…

【Go实现】实践GoF的23种设计模式:解释器模式

上一篇&#xff1a;【Go实现】实践GoF的23种设计模式&#xff1a;适配器模式 简单的分布式应用系统&#xff08;示例代码工程&#xff09;&#xff1a;https://github.com/ruanrunxue/Practice-Design-Pattern–Go-Implementation 简介 解释器模式&#xff08;Interpreter Pat…

【小白入门篇1】GPT到底是怎样练成?

由于具有代表性的OpenAI公司GPT模型并没有开源&#xff0c;所以本章节是参考一些开源和现有课程&#xff08;李宏毅&#xff09;讲解ChatGPT原理。本章没有涉及到很多数学运算&#xff0c;比较适合小白了解GPT到底是怎么练成。GPT的三个英文字母分别代表Generative(生成式)&…

CSS样式,1行文字溢出...省略,2行文字溢出...省略,多行文字溢出...省略

提示&#xff1a;CSS样式文字溢出…省略 文章目录 前言一、1行文字溢出...省略二、2行或多行文字溢出...省略三、1行或多行文字溢出...省略总结 前言 一、1行文字溢出…省略 test.html <!DOCTYPE html> <html lang"en"> <head><meta charset…

Linux中Oracle数据库启动顺序

首先使用oracle用户登录Linux&#xff0c;用lsnrctl status查看监听状态 1、&#xff1a;进入sqlplus $ sqlplus /nolog SQL> 2&#xff1a;使用sysdab角色登录sqlplus SQL> conn /as sysdba 3&#xff1a;启动数据库 SQL> startup 4&#xff1a;打开Oracle监听 …

gitee上传方法,gitee基础命令使用,看一遍就会q(≧▽≦q)

废话不多说&#xff0c;直接上项目演示ψ(&#xff40;∇)ψ 必备工具:Git Bash 首先创建新仓库&#xff1a; 填写仓库名称 起一个合适的名字即可 其他的可以不用填&#xff0c;直接点击创建 然后会跳转到这样的一个页面 然后打开项目文件夹,点击右键,选择 Open Git Bash h…