精华内容
下载资源
问答
  • vue动态路由刷新404
    2022-06-27 17:27:32

    问题:router/index中判断如果路由全都没有匹配上则返回自定义的404页面,但是在动态路由页面点击刷新按钮会跳转到404页面

    解决方法:把自定义的404页面也使用动态路由的方式注入

    更多相关内容
  • vue 动态路由刷新404问题

    千次阅读 2020-02-07 21:37:55
    问题出在静态路由下面有个通配符匹配到/404页面 我们把静态路由下的 { path: '*', redirect: '/404', hidden: true } 删除就可以了。 在动态路由校验的代码中有处理跳转404的代码 ...

    问题出在静态路由下面有个通配符匹配到/404页面
    我们把静态路由下的

    { path: '*', redirect: '/404', hidden: true }
    

    删除就可以了。
    在动态路由校验的代码中有处理跳转404的代码


    【updated】
    做了动态路由的话把上面的代码放在动态路由结尾处是更好的选择。

    展开全文
  • Vue实现动态路由及登录404页面跳转控制页面刷新空白解决方案.docx
  • 如果是动态路由,在router下的index.js中定义一个error404路由变量, 然后在动态路由处引入:// 在这里将用户路由添加到动态路由最后之后,404路由就不是最后了,会引起刷新404问题router.addRoutes([...routes, ...

    请注意:404 page must be placed at the end !!!

    404页面一定要放在路由的最后面,否则就会引起出错,包括动态添加路由的时候,也要放在最后面。

    如果是动态路由,在router下的index.js中定义一个error404路由变量,

     

    然后在动态路由处引入:

    // 在这里将用户路由添加到动态路由最后之后,404路由就不是最后了,会引起刷新404问题

    router.addRoutes([...routes, error404])

     

    展开全文
  • Nginx部署Vue项目动态路由刷新404

    千次阅读 2022-03-03 17:42:35
    记录下Nginx部署Vue项目刷新404的解决方案,遇到了两次,route用的是history路由模式,动态路由: { path: '/article/:blogId', name: 'blog', component: blog } 然后部署nginx, location / { root /usr/...

    前言

    • 记录下Nginx部署Vue项目刷新404的解决方案,遇到了两次,route用的是history路由模式,动态路由:
    {
      path: '/article/:blogId',
      name: 'blog',
      component: blog
    }
    
    • 然后部署nginx
    location / {
    	root   /usr/local/nginx/html/blog/;
        index  index.html index.htm;
    }
    
    • 然后刷新页面

    在这里插入图片描述


    • what happend?

    在这里插入图片描述

    • 后请教了度娘,度娘回答
     location / {
        root   /usr/local/blog/;
        index  index.html index.htm;
        try_files  $uri $uri/ /index.html;
    }
    
    • 再然后

    在这里插入图片描述


    • what happend?

    在这里插入图片描述
    在这里插入图片描述

    好吧,记录下两次的解决方案,先行感谢两位大佬给的启发


    第一次

    网站没有申请二级域名,部署了多项目,所以想的是添加项目前缀'/blog'访问,比如这个:

    https://www.coisini.club/blog
    
    • router.js
    mode: 'history',
    routes: [
      {
        path: '/blog', // 博客首页
        component: home,
        children: [
          {
            path: '/',
            component: index
          },
          {
            path: '/blog/article/:blogId',
            name: 'blog',
            component: blog
          },
         ....
    
    • build.js
    出错打包配置
    assetsPublicPath: './',
    
    正确打包配置
    assetsPublicPath: '/blog/',
    
    • 就是这个assetsPublicPath资源路径忘记配置惹了N多麻烦, 留下了不学无数的眼泪,如果有遇到同样场景的同学记得核实

    在这里插入图片描述

    • nginx.conf
    有两种配置方式,均验证有效
    方式一:
    location /blog {
        root   /usr/local/nginx/html/;
        index  index.html index.htm;
        try_files  $uri $uri/ /blog/index.html;
    }
    
    方式二:
    location /blog {
        root   /usr/local/nginx/html/;
        index  index.html index.htm;
        try_files $uri $uri/ @rewrites;
    }
    
    location @rewrites {
        rewrite ^/(blog)/(.+)$ /$1/index.html last;
    }
    
    • LATER

    在这里插入图片描述


    第二次

    网站申请了二级域名,之前的配置都要修改了,比如这样:

    https://blog.coisini.club/
    
    • router.js
    mode: 'history',
    routes: [
      {
        path: '/',
        component: index
      },
      {
        path: '/article/:blogId',
        name: 'blog',
        component: blog
      },
      ....
    
    • build.js
    assetsPublicPath: './',
    
    • nginx.conf
    server {
        listen       443 ssl;
        server_name  blog.coisini.club;
        
        location / {
            root   /usr/local/blog/;
            index  index.html index.htm;
        }
    }
    
    • 然后部署

    在这里插入图片描述
    在这里插入图片描述

    • 然后照例请教度娘,度娘说try_files $uri $uri/ /index.html;
     location / {
        root   /usr/local/blog/;
        index  index.html index.htm;
        try_files  $uri $uri/ /index.html;
    }
    
    • 然后

    在这里插入图片描述

    在这里插入图片描述

    • 然后,看了无数篇一毛一样的博客后,找到了这位空虚公子vue部署在nginx后刷新404,虽然你肾虚,但我还是
      在这里插入图片描述

    • 正确的写法:

    • build.js

    assetsPublicPath: '/',
    
    • nginx.conf
    location / {
        root   /usr/local/blog/;
        index  index.html index.htm;
        try_files  $uri $uri/ /index.html =404;
        autoindex  on;
    }
    
    • LATER

    在这里插入图片描述



    - End -
    - 个人笔记 -
    - 仅供参考-

    展开全文
  • 作用:每次页面刷新时都先判断一下动态路由是否添加,若没有,重新添加动态路由。 2、在mutations中完成动态路由添加后,给字段isAddRoutes赋值为true,表明已添加动态路由 //动态添加路由 SET_...
  • 主要介绍了vue 解决addRoutes动态添加路由刷新失效问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue单页面需要替换参数并刷新页面时,这个时候使用this.$router.push或this.$router.replace会发现路由改变了,但是页面上的数据并没有实时刷新。在网上找到了以下几种方法,亲测可用: this.$router.go(0) 在...
  • 因为前端Vue+ElementUI项目是单页应用——即只有一个index.html页面,如果路由从远程获取的话,每次F5或点击刷新按钮刷新页面的时候,就会找不到对应的路径而报404错误  三、解决方案 1、通过api远程获取路由,然后...
  • vue3动态路由刷新后空白或者404

    千次阅读 热门讨论 2022-06-16 17:43:23
    实测在vue3使用 "ant-design-vue": "^3.2.5",编写动态路由刷新后会空白或者404的解决方法,代码没有最骚只有更骚 读取后端菜单文件进行处理下 主要的来了,可以main或者router\index编写(我是在router\index...
  • 场景:vue-router实现的单页应用,登录页调用登录接口后,服务器返回用户信息,然后通过router.push({name: ‘index’, params: res.data})传给主页组件,并在主页显示数据。但是刷新页面后,数据就消失了。 解决...
  • 目录一、了解动态路由二、解决问题结论 一、了解动态路由 我这里说的动态路由指的是,由后端提供当前角色可以访问的所有路径,前端提前写好路径与组件之间的映射也就是route,然后根据后端返回的url进行匹配,将匹配...
  • 主要介绍了vue动态添加路由addRoutes之不能将动态路由存入缓存的解决方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 我们成功配置动态路由,点导航栏没问题,一刷新和输入地址 就出问题跳404页面! 原因: addRoutes动态添加路由还没完成,页面就从静态找了。 路由生命周期 静态→动态404是放到静态的所有老报。 解决: 将404路由...
  • vue动态路由刷新丢失解决方案

    千次阅读 2021-11-17 18:32:23
    动态路由添加刷新页面出现空白页面或者404页面 因为界面刷新导致动态路由丢失,所以是空页面或者404 我添加动态路由了怎么还剩刷新依旧是空白页面呢? 因为动态路由添加后需要是新导航才会生效 解决方案 需要...
  • vue动态路由刷新白屏问题解决方法
  • 因为我们的应用是单页客户端应用,当使用 history 模式时,URL 就像正常的 url,可以直接访问http://www.xxx.com/user/id,但是因为vue-router设置的路径不是真实存在的路径,所以刷新就会返回404错误。 想要history...
  • 用Nginx部署Vue项目详细步骤及动态路由刷新404问题解决
  • 使用vue动态路由(“/route/:id” 形式) 传参的时候,修改页面参数,但是视图仍旧是之前的内容,没有进行刷新,示例如下: 原因分析: 具体原因在vue官方文档:响应路由参数的变化一节中有讲过: 当使用路由参数时...
  • 主要介绍了vue实现路由不变的情况下,刷新页面操作,结合实例形式分析了vue路由不变的情况下刷新页面具体原理、操作方法与相关注意事项,需要的朋友可以参考下
  • 主要介绍了Vue路由history模式解决404问题的几种方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue 动态路由 addRoutes 刷新页面404(空白)

    千次阅读 热门讨论 2019-06-03 21:50:11
    vue开发页面,通过addRoutes实现动态路由的添加,但是在进入对应页面的时候刷新时跳转到404或空白,最后发现只需把空白页面跳转直接加载到动态路由后面即可解决,代码如下: 1:静态路由中注释掉{ path: '*', ...
  • 使用的是PanJiaChen大佬的vue-admin-template模板 下载大佬的权限管理模板运行正常,自己用来改造刷新就无限循环or页面空白,下面是改造成功的permission.js相关代码 // !!!自己项目不需要token const ...
  • 1.先确认自己在route.js 或者 main.js 中有没有使用 路由守卫vue.beforeEach和vue.addRouters() 促使页面每次刷新,重新根据后台返回数据生成动态路由,就像你在登陆时做的事情一样。 代码示范注意点: //注意:...
  • 网上一大堆解决失效问题的,我感觉有点繁琐,所 以的问题都是next的问题,不知道next({ ...to.path, replace: true })这个语法干嘛,问题就出在这句话了,本人后来改成 next(to.path)这样,所有的问题都没有了 ...
  • 权限控制的路由模块是动态添加进去的,404监听路由是在默认路由里面的,优先级比动态路由要高,所以刷新后默认先被404接管了,把404监听路由也放到动态路由的末尾就可以了 解决办法: 我把我constantRoutes 里面的...
  • 本篇文章主要介绍了vue通过路由实现页面刷新的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue动态路由刷新页面空白问题

    千次阅读 2021-01-13 17:05:55
    导言:在vue项目中采用动态添加路由的方式,第一次进入页面会正常显示,但是点击刷新页面后会导致页面空白。原因是登录时写入vuex中的路由数据在刷新页面时被清空了,所以每次渲染页面的时候都要重新执行一下添加...
  • <p>vue动态路由刷新页面后丢失,vue动态路由刷新页面后丢失</p>

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 28,636
精华内容 11,454
关键字:

vue动态路由刷新404