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内无效的主要内容,如果未能解决你的问题,请参考以下文章

vue路由的使用

vue-router 的两种模式的区别

vue router路由

Vue Router 中模式选择

Vue Router 中模式选择

vue开发模式能访问nginx吗