我们通过vue脚手架 搭建起来的项目 当项目跑起来 地址栏 始终有一个#

最新推荐文章于 2024-11-12 10:19:40 发布
原创 最新推荐文章于 2024-11-12 10:19:40 发布 · 1.4k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue   #vue-cli  #

本文介绍如何在Vue.js项目中使用Vue Router的历史模式来移除URL中的'#'符号，通过简单配置实现更加美观的URL路径。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >


//实例化路由时 加上 这个配置  然后重新启动项目 就没有#了

export default new VueRouter({

  mode: 'history',  
  routes
})
vue电商项目(一)——项目搭建
a_bowl_rice的博客
12-13 1343
vue电商项目笔记
Vue2电商前台项目（一）：项目前的初始化及搭建
weixin_42044763的博客
09-07 5218
文件夹：放置项目的依赖public文件夹：一般放置的是静态资源（图片），需要注意：放在public文件夹中的静态资源，webpack进行打包的时候，会原封不动打包到dist文件夹中，不会当做一个模块打包到 JS 里面src文件夹​ —assets文件夹：一般放置的是静态资源（一般放置多个组件公用的的静态资源），需要注意：放置在assets文件夹里面的资源，webpack打包的时候，会把静态资源当做一个模块，打包到JS文件里面​ —components文件夹：一般放置的是非路由组件（全局组件）
vue项目地址栏自动加#
peppa_pig的博客
01-16 2917
vue的路由在默认的hash模式下,url会带有一个#,不美观,而且在微信分享,授权登录等都会有一些坑.所以history模式（不带#号）也会有一些应用场景. 1、将路由配置成history模式的方法： 配置路由模式，例如： export default new Router({ mode: 'history', routes: [{ path: '/', name: '...
【vue2.0】解决使用vue-cli生成项目后项目地址自动添加#号的问题
李留白
02-22 6759
使用vue官方的vue-cli脚手架自动生成项目后，在启动项目后，会自动打开 ‘http://localhost:8080/#/’ 地址，而且一直没法去掉“#”号。直到后来重新详细看vue-router官方文档，才发现，这是由路由的默认配置模式引起的。解决方法是将路由配置成history模式，代码如下：export default new Router({ mode: 'history',
基于Vue的前端架构，我做了这15点
这个时代，作为程序员可能要学习小程序
12-08 469
点击上方的终端研发部，右上角选择“设为星标”作者：codexu链接：https://juejin.cn/post/69014669944789401681.分解需求技术栈考虑到后续招人和...
vue项目跑起来。。。
小白的博客
08-19 966
https://www.cnblogs.com/chenyoumei/p/12777863.html
vue3项目如何配置能显示局域网之内的ip网址
舒一笑的博客
02-28 2060
在Vue 3项目中，如果你想要配置项目使其可以通过局域网内的IP地址被访问，通常需要修改开发服务器的配置，使其监听所有网络接口。: 现在，你的Vue项目应该可以通过局域网内的任何设备访问了。只需在设备的浏览器中输入步骤3中找到的IP地址和你在配置中指定的端口号（例如。确保你的防火墙设置允许通过指定的端口进行通信，这样局域网内的其他设备才能访问你的项目。在这个文件中，你可以指定开发服务器的配置选项。要使项目能够通过局域网内的IP地址访问，你需要设置。: 你需要知道你的电脑在局域网内的IP地址。
vue+webpack+vue-router+element+axios全家桶搭建vue项目完整教程详解 2019
PGguoqi的博客
04-19 9478
未完
vue-cli脚手架教程
最新发布
刻苦的樊同学
11-12 3083
安装vue-cli的前提是你已经安装了npm，安装npm你可以直接下载node的安装包进行安装。这是因为引用资源的路径问题，我们只要在下图的地方修改一下再打包就可以了，需要修改的文件在项目目录下的config文件夹里的index.js文件中。在projectname项目目录下执行 npm run build ，打包项目，打包完成之后，我们就可以像打开静态网页一样打开我们完成的项目。这样父组件的变量就传到了子组件，然后子组件使用如下方式接收，这样在子组件中就可以使用变量了，例如：{{username}}
【React】脚手架创建项目
m0_68324632的博客
01-18 1565
创建React项目的命令如下： 不能包含大写字母 create-react-app 你的项目名称 ​
【Vue】去掉默认地址栏的#以及后续问题
coralime的博客
02-24 2286
启动vue项目后，地址栏会默认带一个# 原因是vue-router提供了两种模式，一种Hash模式（默认），一种History模式。 vue-router 默认为 hash 模式，当 URL 改变时，页面不会重新加载，只是根据 hash 来更换显示对应的组件，这就是所谓的单页面应用。 在Hash模式下路由地址会默认带一个#，修改成History模式就行了。 在/router/index.js页面下，修改mode方式 const router = new VueRouter({ mode:
vue项目访问路径#号的问题
流楚丶格念的博客
03-24 6563
是vue项目启动之后，输入http://ip:port，我发现浏览器里面显示的地址栏竟然是http://ip:port/#/，这个”/#/“不知道是什么东西，于是百度查了一下。 原因：对于vue开发的单页面应用，我们在切换不同的页面的时候，可以发现html永远只有一个，这也正是称之为单页面的原因。而vue-router默认hash模式--------使用URL的hash来模拟一个完整的URL，于是当URL改变时，页面不会重新加载。因为对于正常的页面来说，更换url一定是会导致页面更换的，而只有更换url中的
vue地址栏直接访问html,【转】React、Vue直接访问url地址，访问出错报404
weixin_34175919的博客
07-15 1809
部署完成后，访问没问题，从页面中点击跳转也没问题，但是只要点击刷新或通过浏览器地址栏回车，就会出现404现象！在本地开发中是没有这个问题的，调试的时候一切都是正常的直接访问地址，便会出现404http://www.xxx.com/home/application/list问题原因：刷新页面时访问的资源在服务端找不到，因为vue-router设置的路径不是真实存在的路径。如上的404现象，是因为在n...
如何运行vue项目
热门推荐
你家大王的博客
06-19 5万+
在师兄的推荐下入坑vue.js ，发现不知如何运行GitHub上的开源项目，很尴尬。通过查阅网上教程，成功搭建好项目环境，同时对前段工程化有了朦朦胧胧的认知，因此将环境搭建过程分享给大家。   首先，列出来我们需要的东西：   node.js环境（npm包管理器）vue-cli 脚手架构建工具cnpm  npm的淘宝镜像   安装node.js 从node.js官网下载并安装n
vue项目接口访问地址设置
瘦瘦瘦大人的博客
09-07 5403
vue项目接口访问地址设置
vue去掉地址栏上的#号
前端路上坎坎坷坷，总有一天站在顶峰仰望世界！！！
02-19 828
使用vue创建项目,进行使用,地址栏上会有#号,地址栏上的#号是我们在选择路由模式时选择的hash,也是vueroter默认的,我们需要在vuerouter对象里修改为history模式即可 const router = new VueRouter({ mode:'history', routes:router ...
vue禁止输入地址栏直接访问页面_前端新手 Vue应用部署到服务器的正确方式
weixin_39608988的博客
11-21 3125
作者简介：陈老师5年多前端工作经验，主要分享：vue.js,等前端技术掘金专栏：前端开发社区 的个人主页 - 掘金页面出现空白现象，获取资源路径不对等，我相信以VueJs为技术栈来进行前端开发的小伙伴或多或少都会遇到这样的问题，我也遇到过，那现在我们就来一一解决这样的问题。很多时候我们发现辛辛苦苦写的VueJs应用经过打包后在自己本地搭建的服务器上测试没有什么问题，但真正放在服务器上后，会发现或多...
快速上手：Vue脚手架搭建Vue-webpack项目指南
本文详细介绍了如何使用vue脚手架工具（vue-cli）来搭建一个基于webpack的vue项目，这对于初学者和需要高效开发的企业级vue应用开发者都非常实用。以下是关键知识点的详述： 1. **Node.js环境准备**： - 首先确保...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值