VUE : vue-cli中去掉路由中的井号#操作


Posted in Javascript onSeptember 04, 2020

vue-cli项目中,如果想去掉url地址栏中的“#”我们可以用路由的 history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

只需要在路由表中,加入一行代码即可。

VUE : vue-cli中去掉路由中的井号#操作

VUE : vue-cli中去掉路由中的井号#操作

补充知识:vue 打包部署去掉#注意事项

示例基于vue cli2.0脚手架生成的项目

1.vue项目中config文件下index.js中打包配置:

build: {
 // Template for index.html
 index: path.resolve(__dirname, '../dist/index.html'),
 
 // Paths
 assetsRoot: path.resolve(__dirname, '../dist'),
 assetsSubDirectory: 'static',
 assetsPublicPath: '/dist/', // 这个地方使用绝对路径 很重要!
 
 /**
  * Source Maps
  */
 
 productionSourceMap: true,
 // https://webpack.js.org/configuration/devtool/#production
 devtool: '#source-map',
 
 // Gzip off by default as many popular static hosts such as
 // Surge or Netlify already gzip all static assets for you.
 // Before setting to `true`, make sure to:
 // npm install --save-dev compression-webpack-plugin
 productionGzip: false,
 productionGzipExtensions: ['js', 'css'],
 
 // Run the build command with an extra argument to
 // View the bundle analyzer report after build finishes:
 // `npm run build --report`
 // Set to `true` or `false` to always turn it on or off
 bundleAnalyzerReport: process.env.npm_config_report
}

2.路由配置:router文件夹下index.js:

export default new Router({
 mode: 'history', // 去掉#,需要路由模式改为history
 base: '/dist/', // 这个配置也很重要,否则会出现页面空白情况
 scrollBehavior: () => ({ y: 0 }),
 routes: [
  {
   path: '/facebook',
   name: 'Facebook',
   component: Facebook
  },
  {
   path: '/google',
   name: 'Google',
   component: Google
  }
 ]
})

3.剩下的不懂 就要找你得运维或者后端开发小伙伴了,nginx配置:

server {
    listen 8080;
    server_name localhost;
    #charset koi8-r;
    #access_log logs/host.access.log main;
    #打包后的项目目录,一定记住这个地方带有项目名称
    root /Users/qiilee/Desktop/vue/dist;
    index index.html;
 
    location /dist {
        #这个地方没有项目名称,因为请求的时候如果请求:http://localhost:8080/dist ,nginx会查找/Users/qiilee/Desktop/vue/dist/目录下的数据
        root /Users/qiilee/Desktop/vue;
        try_files $uri $uri/ @router;
        index index.html;
    }
    //try_files $uri $uri/ @router;和下边部分很重要,没有这部分发布二级一下的路由会出现js加载,但是也没空白的情况
    location @router {
        rewrite ^.*$ /index.html last;
    }
  }

以上这篇VUE : vue-cli中去掉路由中的井号#操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE浏览器兼容Firefox的JS脚本的代码
Oct 23 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件
Dec 21 Javascript
JavaScript的Module模式编程深入分析
Aug 13 Javascript
jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
Jun 25 Javascript
使用jQuery操作HTML的table表格的实例解析
Mar 13 Javascript
Bootstrap Table表格一直加载(load)不了数据的快速解决方法
Sep 17 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)
Jan 21 Javascript
js实现方块上下左右移动效果
Aug 17 Javascript
AngularJS基于MVC的复杂操作实例讲解
Dec 31 Javascript
vuejs router history 配置到iis的方法
Sep 20 Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
Apr 26 Javascript
vue基于better-scroll实现左右联动滑动页面
Jun 30 Javascript
Vue利用localStorage本地缓存使页面刷新验证码不清零功能的实现
Sep 04 #Javascript
vue-cli3中配置alias和打包加hash值操作
Sep 04 #Javascript
vue深度监听(监听对象和数组的改变)与立即执行监听实例
Sep 04 #Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
Sep 04 #Javascript
解决vue中axios设置超时(超过5分钟)没反应的问题
Sep 04 #Javascript
在vue中axios设置timeout超时的操作
Sep 04 #Javascript
vue 路由meta 设置导航隐藏与显示功能的示例代码
Sep 04 #Javascript
You might like
mysql5详细安装教程
2007/01/15 PHP
合并ThinkPHP配置文件以消除代码冗余的实现方法
2014/07/22 PHP
php命令行模式代码实例详解
2021/02/26 PHP
JavaScript DOM 添加事件
2009/02/14 Javascript
js禁止document element对象选中文本实现代码
2013/03/21 Javascript
[JSF]使用DataModel处理表行事件的实例代码
2013/08/05 Javascript
JavaScript实现继承的4种方法总结
2014/10/16 Javascript
js判断一个字符串是否包含一个子串的方法
2015/01/26 Javascript
javascript 常见功能汇总
2015/06/11 Javascript
使用AngularJS制作一个简单的RSS阅读器的教程
2015/06/18 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
2016/01/14 Javascript
javascript解决小数的加减乘除精度丢失的方案
2016/05/31 Javascript
JS简单实现动态添加HTML标记的方法示例
2018/04/08 Javascript
vue单页缓存方案分析及实现
2018/09/25 Javascript
JS禁用右键、禁用Ctrl+u、禁用Ctrl+s、禁用F12的实现代码
2020/12/01 Javascript
[03:34]2014DOTA2西雅图国际邀请赛 淘汰赛7月15日TOPPLAY
2014/07/15 DOTA
[59:32]Liquid vs Fnatic 2019国际邀请赛淘汰赛败者组BO1 8.20.mp4
2020/07/19 DOTA
Python单元测试框架unittest简明使用实例
2015/04/13 Python
Python数据结构之顺序表的实现代码示例
2017/11/15 Python
完美解决python3.7 pip升级 拒绝访问问题
2019/07/12 Python
在keras中获取某一层上的feature map实例
2020/01/24 Python
Python基于Serializer实现字段验证及序列化
2020/11/04 Python
法国最大的在线眼镜店:EasyLunettes
2019/08/26 全球购物
EJB的角色和三个对象
2015/12/31 面试题
Python面试题集
2012/03/08 面试题
前台文员岗位职责
2013/12/28 职场文书
规划编制实施方案
2014/03/15 职场文书
签约仪式策划方案
2014/06/02 职场文书
2014年大学生党员自我评议
2014/09/22 职场文书
检查机关党的群众路线个人整改措施
2014/10/04 职场文书
委托公证书样本
2015/01/23 职场文书
导游欢迎词范文
2015/01/23 职场文书
初中班干部工作总结
2015/08/10 职场文书
解决pytorch读取自制数据集出现过的问题
2021/05/31 Python
MYSQL 的10大经典优化案例场景实战
2021/09/14 MySQL
疑《守望先锋2》A测截图泄露 或将推出新模式、新界面
2022/04/03 其他游戏