-
2018-07-27 00:00
- 43
- 0
问题描述
基于vue-cli 2.x.x 通过修改webpack配置实现多页结构（如何配置网上很多博客说明，如有需要我再贴出来），但目前此结构的各个单页只能使用vue-router默认的hash模式，无法使用history模式。
问题补充1
如果无法通过写改webpack / vue-loader等配置实现（development & product），也可以提出通过nginx配置代理转发或其他方式（product）。
nginx代理方式目前遇到的问题是：如果使用history模式，访问url虽然正常但不能进行刷新操作（try_files有添加）。
问题补充2
多页模式 + 开发时（history模式将无法访问路由）http://localhost:8011/main.html#/admin/customer/detail?test=101039
多页模式 + 生产时（通过nginx可实现，history模式刷新会404）http://localhost:8011/#/admin/customer/detail?test=101039
或者http://localhost:8011/mian/#/admin/customer/detail?test=101039
单页模式 + 开发时/生产时 + history (期望的url结构)http://localhost:8011/admin/customer/detail?test=101039
问题补充3
nginx生效配置
server {
listen 9009;
server_name localhost;
#字符集
charset utf-8;
location / {
root D:/本机软件/TortoiseSVN/repository/iop/iop-view/dist;
index main.html;
try_files $uri $uri/ /main.html;
}
location ^~ /login/ {
proxy_pass http://127.0.0.1:9009/login.html;
}
} - 共 0 条
- 全部回答
-
浅挚绊离兮 普通会员 1楼
在基于Vue.js的多页结构中，为了支持
vue-router的history模式，你可以按照以下步骤操作：- 首先，安装
vue-router和history库。可以使用npm或yarn进行安装。
npm install vue-router history- 在你的
main.js文件中引入vue-router和history库。
```javascript import Vue from 'vue' import Router from 'vue-router' import Home from '@/components/Home.vue' import About from '@/components/About.vue' import Contact from '@/components/Contact.vue'
Vue.use(Router)
new Router({ routes: [ { path: '/home', component: Home, }, { path: '/about', component: About, }, { path: '/contact', component: Contact, }, ], }) ```
- 在你的每个页面组件中，使用
@/router-link指令来创建导航链接。
html <router-link to="/home">Home</router-link> <router-link to="/about">About</router-link> <router-link to="/contact">Contact</router-link>- 在你的
Home组件中，使用<router-link>指令来跳转到历史记录。
html <router-link to="/history">History</router-link>- 在你的
About组件中，使用<router-link>指令来跳转到历史记录。
html <router-link to="/history">History</router-link>- 在你的
Contact组件中，使用<router-link>指令来跳转到历史记录。
html <router-link to="/history">History</router-link>以上就是在基于Vue.js的多页结构中，如何支持
vue-router的history模式的步骤。 - 首先，安装
- 扫一扫访问手机版
回答动态
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题函数计算不同地域的是不能用内网吧？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题在ARMS如何申请加入公测呀？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的，这个init方法在哪里进行添加？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器刚到期，是不是就不能再导出存档了呢？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了，怎么办？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了，怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了，是什么情况？预计能赚取 0积分收益
- 回到顶部
- 回到顶部