解决vue项目路径不正确,自动跳转404的问题

目录
  • vue项目路径不正确,自动跳转404
    • 第一种方法
    • 第二种
  • vue路由判断跳转404页面

vue项目路径不正确,自动跳转404

第一种方法

使用vuerouter钩子函数beforeEach，每次进行路由跳转时都进行判断，若页面不存在就跳转到404页面。

import Error from ' '
 
const router = new Router({
    routes:[
        name: 'error',
        path: '/error',
        component: Error
    ]
}
 
//beforeEach每次进行路由跳转时都会执行
router.beforeEach((to,from,next){
    if(to.matched.length === 0){
        from.path ? next({name: from.name}) : next('/error')
    }else{
        next()
    }
})
 
export default router

第二种

redirect重定向

 {     path: '/404',       
       component: () => import('@/views/error-page/404'),       
       hidden: true     
  }, 
    
//这个*匹配必须放在最后，将改路由配置放到所有路由的配置信息的最后，否则会其他路由path匹配造成影响。     
 {     path: '*',
       redirect: '/404', 
       hidden: true 
  }

vue路由判断跳转404页面

beforeEach函数 这是路由跳转前处理的函数

import PageNotFound from '@/views/pages/404.vue'
Vue.use(Router)
const routes=[
  {
    path: '*',
    name: 'PageNotFound',
    component: PageNotFound,
  },
] 
 
const router = new Router({
  mode: 'history',
  routes: routes
})
 
router.beforeEach((to, from, next) => {
  //  从其他地方访问是否有这个地址
    if(to.matched.length == 0){
      from.path ? next({name: from.name}) : next('*')
    }
    next();
});

第二种方法就是重定向地址 同上

修改routes中的地址

  {
    path: '/404',
    name: 'PageNotFound',
    component: PageNotFound,
  },
  {
    path:'*',
    redirect:'/404'
   }

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue路由history模式解决404问题的几种方法

    问题背景: vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想hash这种以#号结尾的路径时候的话,我们可以使用路由的history的模式.比如如下网址:使用hash模式的话,那么访问变成 http://localhost:8080/bank/page/count/#/ 这样的访问,如果路由使用 history的话,那么访问的路径变成 如下:http://localhost:8080/bank/page/c

  • 关于vue项目部署后刷新网页报404错误解决

    关于vue项目部署后刷新网页报404错误解决

    目录 报404错误说明是路由的问题 router有两种模式 成功解决 我的项目,前端是vue项目在部署之后可以正常访问,流程没有问题,可是刷新之后浏览器会返回404错误. 部署使用的是nginx,经常用来部署项目,所以容器肯定没有问题, 这种问题在我直接启动时并没有出现过,所以可以猜测是打包时出现的问题, 报404错误说明是路由的问题 vue管理路由的是"router" 目标明确了,去找router的配置文件 import Vue from 'vue' import Router fr

  • 解决vue项目打包上服务器显示404错误,本地没出错的问题

    1.使用脚手架搭建一个vue项目 2.运行,在本地运行没问题,接着打包上服务器,遇到404的错误,如下 这是webpack打包的结果,解决办法如下 1.修改build文件夹下的utils.js文件,大约在51行添加 publicPath:"../../" if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader', publicPath:&quo

  • vue3动态路由刷新后空白或者404问题的解决

    目录 前言 实现 登出页面需要清除缓存 排错过程 总结 前言 之前用vue+ant-design-vue写了一个动态路由的页面,更新看一下不能用了555~~~ 之前用的组件版本不知道了,回退也不知道哪个版本合适,就是用"vue": "^3.2.13" , "vue-router": "^4.0.3","vuex": "^4.0.0",ant-design-vue": "

  • 解决vue项目路径不正确,自动跳转404的问题

    目录 vue项目路径不正确,自动跳转404 第一种方法 第二种 vue路由判断跳转404页面 vue项目路径不正确,自动跳转404 第一种方法 使用vuerouter钩子函数beforeEach,每次进行路由跳转时都进行判断,若页面不存在就跳转到404页面. import Error from ' '   const router = new Router({     routes:[         name: 'error',         path: '/error',        

  • 解决Vuepress码云部署及自动跳转404的问题

    解决Vuepress码云部署及自动跳转404的问题

    目录 Vuepress码云部署及自动跳转404 介绍 部署 GitHub 页面 推到你仓库的的 gh-page 分支 码云页面-Gitee Pages Vuepress的简单使用 安装 Vuepress码云部署及自动跳转404 介绍 VuePress 由两部分组成:一个以 Vue 驱动的主题系统的简约静态网站生成工具,和一个为编写技术文档而优化的默认主题.它是为了支持 Vue 子项目的文档需求而创建的. 由 VuePress 生成的每个页面,都具有相应的预渲染静态 HTML,它们能提供出色的加载

  • 解决ios微信下vue项目组件切换并自动播放音频问题

    解决ios微信下vue项目组件切换并自动播放音频问题

    最近在做一个英语答题项目 , 项目需求是通过答题取的成绩 , 答题的题型是分为 , 听音选图 , 看图选词 , 和填空题 . 项目总共分为了3个页面 , 开始页 ,答题页 和结束页面 ,答题页关于每种题型 , 我做了相应的组件 , 每次切换题目的时候 ,显示对应的的组件 , 要求听音选图的时候会自动播放音频 . 惯例 , ios下的safari和微信内置浏览器都不支持audio的自动播放 , 通常的解决方案都是通过 document.addEventListener('WeixinJSBridg

  • 解决vue项目打包后提示图片文件路径错误的问题

    vue项目打包后在production模式下提示图片 '404(not found),在dev环境下好好的,打包了就提示这个错误.这是为什么呢,以前第一次使用vue-cli构建项目的的时候只有两个图片文件,当时部署后报错路径问题, 当时的想法就是简单粗暴,直接在build好的文件修改了文件路径,再后来项目中遇到了一大堆静态资源,修改路径显然是不行的,看了一下生成文件大概知道是文件目录改变了,所以引用的路径也要随之改变,网上最简单的方法是修改 'config/index.js'文件中的 build

  • 解决vue项目使用font-awesome,build后路径的问题

    问题: 项目在本地run情况下显示正常,在build后font-awesome的css文件依赖的几个图标文件引用路径报错. 在webpack.base.conf.js中关于几个文件的配置如下: { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('fonts/[name].[hash:7].[ext]') } } 解决: 通过

  • 解决vue项目,npm run build后,报路径错的问题

    在build目录下的webpack.prod.conf.js里面: output: { path: config.build.assetsRoot, publicPath: "/dist/", // 添加这行代码,可解决该问题或者publicPath: "./",也可解决 filename: utils.assetsPath('js/[name].[chunkhash].js'), chunkFilename: utils.assetsPath('js/[id].[

  • 解决Vue 项目打包后favicon无法正常显示的问题

    在开发中经常需要为项目添加favicon以增加网站辨识度,在使用Vue开发中出现添加的favicon.ico无法显示问题,如下给出解决方法: 问题分析: 问题根源在于路径,如果使用http链接作为favicon地址一般不是出现问题,出现问题的基本在使用本地图片作为favicon. 如下常规配置: 在项目中使用大家常用的经典将图片文件与应用的index.html放在项目的根目录下,同时在index.html中正确配置favicon路径. 项目启动后会发现该中配置方式并没有生效: 打包后的项目同样存

  • 解决vue项目刷新后,导航菜单高亮显示的位置不对问题

    1本人在学vue项目时遇到一个坑.在写vue项目头部导航时,比如点击第三个,刷新后,高亮状态显示在第一个: 现在是点击第三个页面 刷新后,是第一个页面高亮显示,但是因为路由路径没有改变页面内容还是第三个页面内容,改变的是导航的状态: 捯饬了好久才搞出来,伤的不轻,看控制导航状态的代码部分: 在头部组件里面控制导航菜单高亮显示是checkindex,默认值是0,触发点击事件contact时候会重新赋值,跳转路由,一旦刷新页面,这个checkindex的值就是0,所以要把这个checkindex值记

  • 解决vue项目 build之后资源文件找不到的问题

    解决静态资源失效的问题 这就需要修改我们的 config 中的 index.js了,默认的build 中的部分是这样的: build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), // Paths assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublic

  • 解决vue项目报错webpackJsonp is not defined问题

    在vue单页面应用中,我们大概都会使用CommonsChunkPlugin这个插件. 传送门 CommonsChunkPlugin 但是在项目经过本地测试没有任何问题,打包上线后却会报错 webpackJsonp is not defined.这是因为公共文件必须在自己引用的js文件之前引用. 可以手动改文件引用,但是推荐以下解决办法: 找到build→webpack.prod.conf.js→找到HtmlWebpackPlugin插件,添加如下配置即可 chunks: ['manifest',

随机推荐