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 相关文章推荐
js 为label标签和div标签赋值的方法
Aug 08 Javascript
JavaScript调试工具汇总
Dec 23 Javascript
javascript判断移动端访问设备并解析对应CSS的方法
Feb 05 Javascript
js获得当前系统日期时间的方法
May 06 Javascript
优化RequireJS项目的相关技巧总结
Jul 01 Javascript
javascript手风琴下拉菜单实现代码
Nov 12 Javascript
常见的javascript跨域通信方法
Dec 31 Javascript
去除html代码里面的script正则方法
May 19 Javascript
JSON字符串转换JSONObject和JSONArray的方法
Jun 03 Javascript
Bootstrap popover用法详解
Dec 22 Javascript
JS表单传值和URL编码转换
Mar 03 Javascript
Vue开发之封装分页组件与使用示例
Apr 25 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
基于mysql的论坛(5)
2006/10/09 PHP
PHP防注入安全代码
2008/04/09 PHP
php定期拉取数据对比方法实例
2019/09/22 PHP
FCK调用方法..
2006/12/21 Javascript
Span元素的width属性无效果原因及解决方案
2010/01/15 Javascript
jquery 模拟类搜索框自动完成搜索提示功能(改进)
2010/05/24 Javascript
jquery实现居中弹出层代码
2010/08/25 Javascript
页面回到顶部的三种实现(锚标记,js)
2012/10/01 Javascript
JSON传递bool类型数据的处理方式介绍
2013/09/18 Javascript
js将当前时间格式转换成时间搓(自写)
2013/09/26 Javascript
jquery ajax 调用失败的原因示例介绍
2013/09/27 Javascript
javascipt匹配单行和多行注释的正则表达式
2013/11/20 Javascript
利用js实现前台动态添加文本框,后台获取文本框内容(示例代码)
2013/11/25 Javascript
基于 Docker 开发 NodeJS 应用
2014/07/30 NodeJs
window.location 对象所包含的属性
2014/10/10 Javascript
JavaScript中使用document.write向页面输出内容实例
2014/10/16 Javascript
举例说明如何为JavaScript的方法参数设置默认值
2015/11/17 Javascript
Bootstrap每天必学之模态框(Modal)插件
2016/04/26 Javascript
js 动态给元素添加、移除事件的实现方法
2016/07/19 Javascript
浅谈Javascript中的12种DOM节点类型
2016/08/19 Javascript
JS锚点的设置与使用方法
2016/09/05 Javascript
浅谈js中几种实用的跨域方法原理详解
2016/12/02 Javascript
javascript中this关键字详解
2016/12/12 Javascript
vue组件实现可搜索下拉框扩展
2020/10/23 Javascript
详解JavaScript对数组操作(添加/删除/截取/排序/倒序)
2019/04/28 Javascript
使用Vant完成通知栏Notify的提示操作
2020/11/11 Javascript
简单谈谈Python中的json与pickle
2017/07/19 Python
Python饼状图的绘制实例
2019/01/15 Python
css3media响应式布局实例
2016/07/08 HTML / CSS
AmazeUI 按钮交互的实现示例
2020/08/24 HTML / CSS
优秀体育委员自荐书
2014/01/31 职场文书
大学辅导员事迹材料
2014/02/05 职场文书
525心理活动总结
2014/07/04 职场文书
群众路线查摆问题及整改措施
2014/10/10 职场文书
详解MySQL 联合查询优化机制
2021/05/10 MySQL
JS前端轻量fabric.js系列物体基类
2022/08/05 Javascript