首页 > 其他分享 >vue3中路由错误自动跳转404页面 路由表写法

vue3中路由错误自动跳转404页面 路由表写法

时间:2023-04-06 16:12:48浏览次数:44  
标签:import vue3 404 跳转 path 路由表

  1. 定义路由表
import { createRouter, createWebHashHistory } from "vue-router";

const routes = [
	{
	 path: "/",
	 name: "home",
	 component: Home,
	},
 // ...
	{
	 path: "/404",
	 name: "404",
	 component: () =>
	  import(/* webpackChunkName: "404" */ "../views/404"),
	},
	{
	 // 此处vue3更新需要使用catchall方法匹配,不然会出现错误:
	 // Catch all routes ("*") must now be defined using a param with a custom regexp
	 path: "/:catchAll(.*)",
	 redirect: "/404",
	},
]

标签:import,vue3,404,跳转,path,路由表
From: https://www.cnblogs.com/nancheng0/p/17293077.html

相关文章

  • Vue3.0学习(一)------Vue简单介绍
    什么是Vue?官方原文:Vue是一款用于构建用户界面的JavaScript框架。它基于标准的HTML、CSS和JavaScript构建,并提供了一套声明式的、组件化的编程模型,帮助你高效地开发用户界面。简单来说,Vue就是一个构建用户界面的前端框架Vue的两个核心功能声明式渲染Vue基于标准HTML扩展了一......
  • 第四十七篇 vue - vue2 和 vue3 的对比
    vue2和vue3不同点汇总1、生命周期2、多根节点3、CompositionApi4、异步组件5、响应式原理6、Teleport7、虚拟Dom8、事件缓存9、Diff算法优化10、打包优化11、TypeScript支持生命周期1、Vue3生命周期整体上变化不大,Vue3在大部分生命周期钩子名称......
  • 如何在vue3获取 DOM 元素
    获取dom的ref元素名称,要对应暴露的名称,不然会出现无效的dom报错,也就是拿到的是null在setup中,使用ref(null)获取dom不能直接在setup里面拿到dom的值,因为setup对应的生命周期是created,所以必须在后续的生命周期钩子里面拿到,比如onMounted注意:ref不要加冒号,直接写dom元素名称......
  • Vue3——使用deep进行样式穿透的时候发出v-deep警告
    前言其实只是一个警告,如果你不在意也是可以的,不过有点强迫症就按着提示说的改了,然后又去官网看了下对应的文档;!>::v-deepusageasacombinatorhasbeendeprecated.Use:deep()instead.这里没啥好说的,因为Vue3的文档中有对应的解释组件作用域CSS了,而且就算不看文档根据提......
  • 项目实践后的图片压缩完整使用过程【vue3+js】
    van-uploader+图片压缩+图片base64转成file compressImage.jsconstACCEPT=['image/jpg','image/png','image/jpeg']constMAXSIZE=1024*1024*2;constMAXTIP="4"//压缩算法函数/*1.首先拿到了base64的图片字符串2.创建一个image对象,获......
  • UI跳转WE DYNPRO带参数
    同事今天在做一个需求,需要把UI上的业务角色,传递给挂在UI上的DYNPRO程序。然后我们就研究了一下,发现挺好玩的。1,设置URL参数2.定义URL的参数3.找到链接对应的类,把参数传上4.WEBDYNPRO里把参数设置到application上5.然后在默认的windows里加入入参,获取参数 ......
  • vue3+vite 解决本地调用时跨域请求
    1、config配置文件中,axios默认请求地址;改为"/api",否则还是请求环境变量中的地址; 2、vite.config.ts文件中做如下配置:  server:{  open:true,//启动项目自动弹出浏览器  port:8081,//启动端口  cors:true,  proxy:{   "/api":{  ......
  • 【vue】vue3中的动画
    vue版本:vue3不过是控制动画放到了标签内控制在上图中,是绑定到了stylevue中关于动画的封装入场出场动画进入开始状态(时间点).v-enter-from{}动态效果(时间段).v-enter-active{}终止状态(时间点).v-enter-to{}.v-leave-from{}.v-leave-active{}.v-lea......
  • vue3适配移动端的登录实现
    <scriptlang="ts"setup>import{ref}from'vue'constPHONE_NUMBER_REGEX=/^1[0-9]{10}$/constVERIFICATION_CODE_REGEX=/^[0-9]{6}$/constLOGIN_ERROR_MESSAGE='登录失败,请检查网络连接并重试'constGENERATE_CODE_ERROR_MESSAGE......
  • Vue3 v-drag 拖拽指令的简单使用
    文档官网文档:https://www.npmjs.com/package/v-drag使用安装、引入npminstallv-drag--saveimportdragfrom"v-drag"使用直接使用:<divv-drag>Dragme!</div>注意:对原本绝对定位水平居中的div,其居中的实现方式应为:div{ position:absolute; left:50%; trans......