vue router hash构建的项目放在iframe内无效
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue router hash构建的项目放在iframe内无效相关的知识,希望对你有一定的参考价值。
求大神给个解决方案
参考技术A 首先在app.vue里面有这么一段<router-view class="router-view" ></router-view>然后你所点击的按钮其实是这个东西<router-link :to=""></router-link>,这个其实就是个封装完的a标签
你在router里面配置完了相关路由之后就能在点击这个按钮的时候将router-view标签里面的组件替换掉了
Vue Router 中模式选择
一、前言
在以往的项目中路由模式都是使用默认的 hash,最近的一个项目中用到了 history 模式,但是出现一些问题。在这里对着两种模式做一个对比。
二、hash 模式
在 Vue Router 中默认使用的是 hash 模式,所以在使用这种模式是不需要设置的,直接默认就行。
const router = new VueRouter({ routes: [...] })
在请求路由的时候是使用 URL 的 hash 来模拟完整的 URL,所以当 URL 改变时,页面不会重新加载。
具体如下所示:
http://localhost:8000/#/home
看到这个类似于以往使用的锚点一样。
所以页面的请求和路由是可以完全分开的(子所以这样说是为了和 history 对应)。这样的话页面的路由全部由前端进行控制,对应没有匹配的路由可以设置一个 404 页面。
三、history 模式
声明 router 的时候如果使用 history 模式需要显示设置:
const router = new VueRouter({ mode: ‘history‘, routes: [...] })
使用 history 模式后 URL 就像正常的 URL:
http://localhost:8000/home
使用 history 模式需要注意一些问题:
1、服务端也需要配置一个静态页面,当 URL 匹配不到任何资源的时候返回
2、使用代理的时候,最好把 pathRewrite 设置为和路由不一样的,否则可能会导致请求路由时也被代理,但是返回的不是想要的静态页面
以上是关于vue router hash构建的项目放在iframe内无效的主要内容,如果未能解决你的问题,请参考以下文章