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 相关文章推荐
OfflineSave离线保存代码再次发布使用说明
May 23 Javascript
使用jquery插件实现图片延迟加载技术详细说明
Mar 12 Javascript
Javascript四舍五入Math.round()与Math.pow()使用介绍
Dec 27 Javascript
60行js代码实现俄罗斯方块
Mar 31 Javascript
js文本框输入内容智能提示效果
Dec 02 Javascript
JavaScript与jQuery实现的闪烁输入效果
Feb 18 Javascript
vue.js,ajax渲染页面的实例
Feb 11 Javascript
vue中父子组件注意事项,传值及slot应用技巧
May 09 Javascript
vue动态删除从数据库倒入列表的某一条方法
Sep 29 Javascript
你可能不知道的CORS跨域资源共享
Mar 13 Javascript
微信小程序下拉菜单效果的实例代码
May 14 Javascript
Jquery异步上传文件代码实例
Nov 13 jQuery
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
ThinkPHP中Widget扩展的两种写法及调用方法详解
2017/05/04 PHP
PHP排序算法之归并排序(Merging Sort)实例详解
2018/04/21 PHP
线路分流自动跳转代码;希望对大家有用!
2006/12/02 Javascript
麻雀虽小五脏俱全 Dojo自定义控件应用
2010/09/04 Javascript
jQuery获取浏览器中的分辨率实现代码
2013/04/23 Javascript
javascript使用数组的push方法完成快速排序
2014/09/15 Javascript
讲解JavaScript中for...in语句的使用方法
2015/06/03 Javascript
浅谈JavaScript的Polymer框架中的事件绑定
2015/07/29 Javascript
JS实现CheckBox复选框全选、不选或全不选功能
2020/07/28 Javascript
javascript拖拽应用实例
2016/03/25 Javascript
js控制台输出的方法(详解)
2016/11/26 Javascript
vue.js中Vue-router 2.0基础实践教程
2017/05/08 Javascript
JS实现合并json对象的方法
2017/10/10 Javascript
vue实现图书管理demo详解
2017/10/17 Javascript
vue中post请求以a=a&b=b 的格式写遇到的问题
2018/04/27 Javascript
JavaScript遍历数组的三种方法map、forEach与filter实例详解
2019/02/27 Javascript
TypeScript开发Node.js程序的方法
2019/04/30 Javascript
如何提升vue.js中大型数据的性能
2019/06/21 Javascript
JS实现前端动态分页码代码实例
2020/06/02 Javascript
Vue实现腾讯云点播视频上传功能的实现代码
2020/08/17 Javascript
[03:24]CDEC.Y赛前采访 努力备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
Python利用Beautiful Soup模块搜索内容详解
2017/03/29 Python
详解Python实现多进程异步事件驱动引擎
2017/08/25 Python
用python实现百度翻译的示例代码
2018/03/09 Python
python搭建服务器实现两个Android客户端间收发消息
2018/04/12 Python
numpy实现神经网络反向传播算法的步骤
2019/12/24 Python
python zip()函数的使用示例
2020/09/23 Python
Keds官方网站:购买帆布运动鞋和经典皮鞋
2016/11/12 全球购物
自荐信结尾
2013/10/27 职场文书
自荐信的五个重要部分
2013/10/29 职场文书
师范生自我鉴定
2014/03/20 职场文书
银行委托书范本
2014/04/04 职场文书
保护母亲河倡议书
2014/04/14 职场文书
4S店客服专员岗位职责
2015/04/07 职场文书
python单元测试之pytest的使用
2021/06/07 Python
SpringDataJPA实体类关系映射配置方式
2021/12/06 Java/Android