精华内容
下载资源
问答
  • vue 动态路由刷新404问题

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

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

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

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


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

    展开全文
  • <p>vue动态路由刷新页面后丢失,vue动态路由刷新页面后丢失</p>
  • vue 动态路由 addRoutes 刷新页面404(空白)

    千次阅读 热门讨论 2019-06-03 21:50:11
    vue开发页面,通过addRoutes实现动态路由的添加,但是在进入对应页面的时候刷新时跳转到404或空白,最后发现只需把空白页面跳转直接加载到动态路由后面即可解决,代码如下: 1:静态路由中注释掉{ path: '*', ...
    vue开发页面,通过addRoutes实现动态路由的添加,但是在进入对应页面的时候刷新时跳转到404或空白,最后发现只需把空白页面跳转直接加载到动态路由后面即可解决,代码如下:
       1:静态路由中注释掉{ path: '*', redirect: '/404', hidden: true }(如果有)
       2:在动态路由中push上面注释掉的路由,asyncRoutes.push({ path: '*', redirect: '/404', hidden: true });
       一天的郁闷最后时刻搞定,哈哈哈哈哈哈哈。。。。。。
    
    展开全文
  • vue动态路由刷新页面参数丢失问题

    千次阅读 2020-10-17 13:41:45
    接下来进入详情页this.$router.push("/detail/111"),此时刷新页面就会发现/111神奇的消失了。一脸懵逼。。。。 查阅相关文档后,发现vue有两种传参方式:params和query,正确的传参姿势应该是这样: params方式: ...

    例如我们在router.js中是这么写的

    {
      path: '/detail/:id',
      component: Detail,
      name:'detail'
    },
    

    接下来进入详情页this.$router.push("/detail/111"),此时刷新页面就会发现/111神奇的消失了。一脸懵逼。。。。

    查阅相关文档后,发现vue有两种传参方式:params和query,正确的传参姿势应该是这样:

    params方式:
    在这里插入图片描述
    query方式:
    在这里插入图片描述
    通过上面对比可以发现,params是和name配合使用,而query是和path配合使用。

    通过对比地址栏路由可以发现,params方式的路径和post方式传参类似,而query和get方式传参类似。

    展开全文
  • Vue history路由模式 刷新404 当我们使用Vue开发SPA(单页面应用)的时候,需要引入前端路由系统(vue-router)。vue-router是vue.js官方提供的路由插件,它和vue.js是深度集成的。前端路由的核心,就在于 ——** ...

    Vue history路由模式 刷新404

    当我们使用Vue开发SPA(单页面应用)的时候,需要引入前端路由系统(vue-router)。vue-router是vue.js官方提供的路由插件,它和vue.js是深度集成的。前端路由的核心,就在于 ——** 改变视图的同时不会向后端发出请求。**
    在Vue单页面应用中页面切换其实就是组件的切换,vue-router的作用在于将路径和组件联系起来,使得通过不同的路径可以访问到不同的组件。在传统的页面中,我们切换页面是通过a标签来实现,每一次页面切换都需要向后台发送请求。

    vue-router的两种路由模式hash模式和history模式

    在使用Vue-router时候路由模式默认是hash;
    hash模式的url中永远带着#号,它的特点在于:hash 虽然出现在 URL 中,但不会被包括在 HTTP 请求中,对后端完全没有影响,因此改变 hash 不会重新加载页面。说到这里就不得不说一下前端路由的原理:window是可以监听到哈希值的变化的(onhashchage事件),这就意味着:当url中的哈希值发生了变化,无需发起http请求,window也可以监听到这种变化,并按需加载前端的代码块。哈希模式也是当下单页面应用的标配,所谓前端路由的强大之处也就在这里:路由分发不需要服务器来做,前端自己就可以完成。

    历史模式(history mode)
    history模式利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。这两个方法应用于浏览器的历史记录栈,在当前已有的 back、forward、go 的基础之上,它们提供了对历史记录进行修改的功能。只是当它们执行修改时,虽然改变了当前的 URL,但浏览器不会立即向后端发送请求。

    hash 模式和 history 模式都属于浏览器自身的特性,Vue-Router 只是利用了这两个特性(通过调用浏览器提供的接口)来实现前端路由。

    hash模式的#可能会使人认为不太美观,于是选用了history,history相对于hash来说符合URL标准格式,但是history模式有一个很大的坑:刷新404

    当页面刷新时:

    1、hash 模式下刷新会请求后台,但是url中只包含#之前的部分,后台是存在对应了路由的,不会404,页面正常。

    2、history 模式下刷新请求后台,此时的url是所有的url,包含get参数,如:http://www.baidu.com/detail/id,当后台中缺少对 /detail/id将返回 404 错误。history需要后台支持。

    解决办法

    1、apache服务器

    1.apache开启rewrite模块
    **具体做法:**找到apache环境下的httpd.conf文件,搜索LoadModule rewrite_module modules/mod_rewrite.so(搜索不到可以是空格,搜索一部分只要能找到就行),去掉前面的“#”号。

    注:LoadModule rewrite_module modules/mod_rewrite.so 如果找不到,请在httpd.conf添加

    2.虚拟主机配置Allowoverride为all
    **具体做法:**最好把httpd.conf里面的所有AllowOverride none 修改为all

    3、.htaccess

    <IfModule mod_rewrite.c>
      RewriteEngine On
      RewriteBase /
      RewriteRule ^index\.html$ - [L]
      RewriteCond %{REQUEST_FILENAME} !-f
      RewriteCond %{REQUEST_FILENAME} !-d
      // 注意:这个目录是你设置存放vue上线文件的目录,如说我vue文件放在了根目录下的dist文件夹中,这样可写为/dist/index.html
      RewriteRule . /dist/index.html [L]
    </IfModule>
    

    在网站根目录添加.htaccess 文件,并把以上代码添加进去, 保存

    4.重启Apache

    2、nginx服务器

    server{
    	listen  80;
    	server_name  域名;
    	location / {
    	    try_files $uri $uri/ @router; // 这里配置vue ’history‘ 路由子页面无法刷新
    	 	root 前端页面路径;
             index index.html;
        }
           // 这里配置vue ’history‘ 路由子页面无法刷新
         location @router {
              rewrite ^.*$ /index.html last;
         }
    }```
    
    
    
    展开全文
  • 背景 /home:项目首页,同步路由 /uc/profile:个人信息页,异步路由...项目:基于vue-element-admin,对权限菜单,异步路由,Mock文件都已经写好了。只需要根据需求修改就可以! 最开始项目没有配置重定向404..
  • 主要介绍了Vue项目路由刷新的实现代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 目前在使用VUE3.X开发,发现加载动态路由的话,由于刷新页面就会重新加载VUEX,故会丢失已存在的state,但是又不想localStorage,sessionStorage。 经过多次试验,采取在权限验证里面的路由守卫里,添加 检测如果...
  • vue动态路由刷新页面空白问题

    千次阅读 2021-01-13 17:05:55
    导言:在vue项目中采用动态添加路由的方式,第一次进入页面会正常显示,但是点击刷新页面后会导致页面空白。原因是登录时写入vuex中的路由数据在刷新页面时被清空了,所以每次渲染页面的时候都要重新执行一下添加...
  • Vue动态路由配置,f5刷新动态路由丢失,路由重定向报Promise的错误----------------其实超级简单 业务流程 用户登录(获取token) 得到用户token后,可以携带token(如果不需要token,请略过此步骤)请求动态路由...
  • Vue动态路由-刷新空白-解决办法 //main.js //"vue-router": "^3.2.0" var tag = true router.beforeEach((to,from,next)=>{ if (tag) { tag = false //这里执行动态添加路由的操作 addRoute(parentName: ...
  • 坑53(vue3、vue-router4、动态路由刷新404或白屏、next): 简略版:(tips:不只刷新会出问题,输入网址导航也会) 1、刷新404:将匹配全部为定义路径到404的路由从静态路由表中去除,在动态权限路由都添加了...
  • 前端路由可以跳转,但是如果在地址栏回车刷新这个路由会报404.究其原因是因为,浏览器把前端路由当做一个后端路由去后台请求,后台没有这个路由当然就会报错。 知道原因了,我们只需要在启动类中设置当报404以后让...
  • 动态路由放在导航中间而不是最后 思路 只要在修改原来插入动态路由的地方就可以 操作 修改文件: /src/store/modules/permission.js。 const mutations = { SET_ROUTERS: (state, routes) => { state....
  • vue项目中,一个可行的路由规则很重要,它决定着用户是否有权限进入的路由,已经某些路由在刷新时要跳转等等 这部分代码是使用vue全家桶之一的router完成的,下面看具体实例 ... // 监听路由刷新进行...
  • 刷新后权限控制的页面就默认跳转到404页面了,搞了半天终于解决了,原因是权限控制的路由模块是动态添加进去的,而我的404监听路由是在默认路由里面的,优先级比动态路由要高,所以刷新后默认先被404接管了,改一下...
  • Vue 实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案
  • vue路由history模式刷新404问题解决方案

    万次阅读 多人点赞 2018-05-17 16:01:22
    但是换成history模式,就会有个新的问题,就是页面刷新后,页面就无法显示了(404)。对于这个问题,我们只需要在服务器配置如果URL匹配不到任何静态资源,就跳转到默认的index.html。 我这里是针对nginx的配置,...
  • 使用vue动态路由(“/route/:id” 形式) 传参的时候,修改页面参数,但是视图仍旧是之前的内容,没有进行刷新,示例如下: 原因分析: 具体原因在vue官方文档:响应路由参数的变化一节中有讲过: 当使用路由参数时...
  • 部署 vue 单页面刷新路由404问题解决

    千次阅读 2019-06-14 09:40:33
    部署 单页面刷新路由404问题解决 在linux下搭建nginx测试网页的时候,正常打开可以访问,当刷新后页面出现404 not found的问题 说明: vue-router默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,...
  • 但是在生产环境只能访问首页(刷新404),其他页面的访问和刷新全都是404。而在hash模式下开发环境和生产环境路由跳转均无问题。 后端配置: 1.Nginx location / { try_files $uri $uri/ /index.html; #检测文件...
  • vue动态路由

    千次阅读 2019-05-20 10:13:02
    addRoutes动态页面刷新进入404页面解决方案。
  • Vue动态路由传参 query传参 params传参 //定义Detail路由 { path: '/detail/:id', name: 'Detail' component: () => import('@/views/Detail.vue') } 1.query方式传参和接收参数 传参: this.$router.push({...
  • 在做vue项目时需要使用后端给的路由权限,处理路由动态添加到路由上,几经查找在 vue-Router中有个router.addRoutes 的方法。 官方使用方法及说明 点我 router.addRoutes 函数签名: router.addRoutes(routes: ...
  • 由于子路由都是动态追加的,当界面刷新的时候,其实我们路由里面并没有该子界面的配置,所以就是404咯,也就是空白咯 在页面刷新时候,在router.beforeEach里面去判断,如果是动态路由而且是第一次加载,则动态追加...
  • vue中,我们所要实现的一个场景就是: 1.搜索页面==>到搜索结果列表页时,搜索结果列表页面要重新获取数据, 2.搜索结果列表页面==>点击进入详情页==>从详情页返回列表页时,要保存上次已经加载的数据和...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 21,927
精华内容 8,770
关键字:

vue动态路由刷新404

vue 订阅