首页 > 其他分享 >关于vue中动态路由404 为什么要放最下面

关于vue中动态路由404 为什么要放最下面

时间:2023-05-09 09:44:46浏览次数:40  
标签:vue 匹配 404 跳转 要放 路由 页面

在vue在路由匹配机制中,对路由的匹配是从上到下的,通常使用{ path: '*', redirect: '/404', hidden: true }进行404页面跳转,*代表获取所有路径标识,如果放在前面就会提前进行匹配到404页面,从而无法匹配到正确页面。所以我们需要将其放在最后,只有当页面不存在的时候再去匹配404页面,进行页面跳转。

标签:vue,匹配,404,跳转,要放,路由,页面
From: https://www.cnblogs.com/Yimuqiao/p/17383953.html

相关文章

  • vue中 vuex踩坑笔记-刷新后动态路由不渲染
    在vue中,vuex经常用于存储公共状态,特别是在登录的时候获取token再保存,这个时候如果是做的动态路由,由于vuex的特性在你刷新后会清除你的所有操作的存储。这时候,存储的token和动态路由都会被清掉。如何解决这个问题:1.结合session或者cookie(通常用这个),token保存的时候,除了在vuex中......
  • vue3 路由页面返回时,恢复滚动条位置
    首先,路由必须是KeepAlive模式<scriptsetuplang="ts">import{onActivated}from"vue";import{onBeforeRouteLeave}from"vue-router";import{ref}from"vue"constscrollRef=ref(<HTMLElement><unknow......
  • vue中手动清除KeepAlive缓存
    首先,这是vue的官方文档 KeepAlive|Vue.js(vuejs.org) KeepAlive组件能够保存当前组件状态,在进行路由跳转时变为【不活跃状态】而非卸载。但是官方并没有提供清除缓存的方法(除了刷新页面,整体重建)  假设以下是我们路由&对应组件的代码<router-viewv-slot="{Component}"......
  • vue-cli打包出单文件
    //vue.config.js修改const{defineConfig}=require('@vue/cli-service')module.exports=defineConfig({ transpileDependencies:true, filenameHashing:false, css:{  extract:false, }, configureWebpack:{  optimization:{   spl......
  • Vue "引用式"调用组件内函数
    场景希望在点击页面上的某个button时,刷新某个组件的内容.组件内容刷新函数getStatistic()在组件<Table/>内,当点击"统计"按钮时,页面Block切换至统计页面,同时调用对应组件中的getStatistic()函数,更新数据.解决方案//创建一个ref对象,接受<Table/>组件......
  • 记录--极致舒适的Vue页面保活方案
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助为了让页面保活更加稳定,你们是怎么做的?我用一行配置实现了Vue页面保活是指在用户离开当前页面后,可以在返回时恢复上一次浏览页面的状态。这种技术可以让用户享受更加流畅自然的浏览体验,而不会被繁琐的操作打扰......
  • vue3 多级数据下拉选择组件
    若依的下拉组件太复杂,我改了一下,希望对大家有帮助,基于element-plusel-tree-select组件:举个栗子,TreeSelect.vue:<template><div><el-tree-selectstyle="width:100%"v-model="valueId"id="tree-option"ref="s......
  • vue3 通过fuse.js 实现前端模糊查询
    在项目中写好多个查询组件,基于element-plusel-select组件:举个栗子,SelectAllCompany.vue:<template><!--获取客户下拉数据,type0有限公司--><el-selectv-model="current":multiple="multiple"remote:remote-method="querySearch":suff......
  • vue2自定义组件@click点击失效问题及解决
    1.参照官方文档,可以用@click.native=“click”解决2.$emit组件之间事件传递解决https://www.jb51.net/article/246610.htm......
  • vue3 证件识别上传组件封装
    证件图片识别上传根据业务需要,经常涉及到证件上传,例如身份证上传、银行卡、营业执照等信息,根据设计师的设计,单独封装了一个上传组件。识别接口后端用的是阿里云的。上传组件用的是element-plusel-upload上代码:<template><divclass="component-upload-image"><el-up......