vue的history路由模式配置及后台配置

最新推荐文章于 2024-07-17 11:10:17 发布
最新推荐文章于 2024-07-17 11:10:17 发布
阅读量4.5k 收藏 6
点赞数
分类专栏： vue 文章标签： web vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42994986/article/details/119353610
版权
本文介绍了如何在Vue项目中启用history路由模式，并详细阐述了后台Nginx的配置步骤，确保路由正常工作。在Vue的router.js中设置mode为history并设定base为rootFile，同时在config.index.js的build部分将assetsPublicPath设为绝对路径'/rootFile/'。不这样做可能会导致刷新时静态资源路径错误。保持这三个设置的一致性至关重要。
摘要由CSDN通过智能技术生成

项目根目录文件夹名称：rootFile
一：后台配置：
1、Nginx：

location ~ ^/rootFile/ {
   
	 root F:/XXX;
 	try_files $uri $uri/ /rootFile/index.html;
}

二：Vue配置：
1、文件 router.js将 mode 设置成 history 模式，并设置base：rootFile（和网站根目录名称一致，不然
会报错）


                

                
                
        

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  鲨鱼辣椒面丶
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
vue路由模式及 history 模式下服务端配置

				
			

			

				

					老司机的后备箱
				

				

					06-27
					
					3948
					
				

			

		

		

			
				
本文已参与「新人创作礼」活动，一起开启掘金创作之路vue 项目中，我们比较常用的模式为 hash 和 history 模式 默认情况下，vue 项目采用的就是 hash 模式 有些人对 history 模式下，为什么需要服务器做相应配置，以及如何配置不甚理解，所以这篇文章就对此做出分析，重点是让大家理解，为什么 history 模式下需要服务器做配置 这里会对 hash 模式和 history 模式都做出说明，通过对比，才能更好的理解我们的行为先从一个熟悉的锚标记案例开始，帮助大家理解 hash 模式是怎么

			
		

	



                

              
                



	

		

			

				
					
Vue history路由模式配置及后台配置

				
			

			

				

					CSDN_Hss的博客
				

				

					06-26
					
					7495
					
				

			

		

		

			
				
项目根目录文件夹名称：rootFile

一：后台配置：

1、Nginx：

location ~ ^/rootFile/ {

   root F:/XXX;
   try_files $uri $uri/ /rootFile/index.html;
}

二：Vue配置：

1、文件 router.js将 mode 设置成 history 模式，并设置base：rootFile（...

			
		

	



                


  
              

                


	

		

			

				
					
vue-router路由使用 history 模式时，后端如何配置

					
热门推荐

				
			

			

				

					wenmin1987的博客
				

				

					07-16
					
					2万+
					
				

			

		

		

			
				
 

官网配置：不同服务器参考---mode: 'history',

https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90

1.后端SpringBoot如何配置：

当我们使用Vue开发时，一般会用到vue-rou...

			
		

	





	

		

			

				
					
使用vue router需要注意的点

					
最新发布

				
			

			

				

					oschina_41559824的博客
				

				

					07-17
					
					344
					
				

			

		

		

			
				
Vue Router 支持多种历史模式来管理应用的导航和URL状态。主要的两种模式是 hash 模式和 history 模式。每种模式都有其特定的用途和适用场景。

			
		

	



		

			
		



	

		

			

				
					
vue使用 history 路由模式后端配置【java、node】

				
			

			

				

					weixin_43837268的博客
				

				

					09-09
					
					7897
					
				

			

		

		

			
				
1.后端SpringBoot如何配置：

当我们使用Vue开发时，一般会用到vue-router来作为前端路由，实现单页应用。vue-router提供了两种模式模拟一个完整的 URL：hash模式和history模式。

hash模式：使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。


//查看id为1的文章
http://localhost:88...

			
		

	





	

		

			

				
					
Vue HTML5 History 模式

				
			

			

				

					weixin_34184561的博客
				

				

					11-22
					
					349
					
				

			

		

		

			
				
vue-router默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。
如果不想要很丑的 hash，我们可以用路由的history 模式，这种模式充分利用history.pushStateAPI 来完成 URL 跳转而无须重新加载页面。

const router = new VueRouter({
  mo...

			
		

	





	

		

			

				
					
routes路由模式设置为history时后端配置

				
			

			

				

					yuyanxinyu的博客
				

				

					02-23
					
					995
					
				

			

		

		

			
				
mode: 'history'   //路由模式，默认hash，history模式需要后端做相关配置。

			
		

	





	

		

			

				
					
针对Vue路由history模式下Nginx后台配置操作

				
			

			

				

					01-18
				

			

		

		

			
				
前端将vue路由模式改为history模式后需要运维配置才能正常访问，配置信如下   location / {  root html;  index index.html index.htm;  try_files $uri $uri/ @rewrites;  }  location @rewrites {  rewrite ^(.+)$...

			
		

	





	

		

			

				
					
Vue路由history模式解决404问题的几种方法

				
			

			

				

					12-10
				

			

		

		

			
				
问题背景： vue-router 默认是hash模式，使用url的hash来模拟一个完整的url，当url改变的时候，页面不会重新加载。但是如果我们不想hash...不过history的这种模式需要后台配置支持。比如：当我们进行项目的主页的时候

			
		

	





	

		

			

				
					
vue模式history下在iis中配置流程

				
			

			

				

					10-17
				

			

		

		

			
				
 配置Vue.js History模式在IIS上的过程包括构建Vue项目、在IIS中创建网站、安装URL重写模块、配置重写规则以及解决可能出现的内存问题。正确配置后，你的Vue应用就能在IIS上顺利运行，并提供无刷新的导航体验。记住...

			
		

	





	

		

			

				
					
vue history模式下面后端如何配置

				
			

			

				

					sanlyshi's front-end road
				

				

					01-02
					
					6950
					
				

			

		

		

			
				
hash ——即地址栏URL中的#符号。
hash 虽然出现URL中，但不会被包含在HTTP请求中，对后端完全没有影响，因此改变hash不会重新加载页面。
history ——利用了HTML5 History Interface 中新增的pushState() 和replaceState() 方法。需要特定浏览器支持
history模式，会出现404 的情况，需要后台配置。
1、hash模式下，...

			
		

	





	

		

			

				
					
路由hash模式改成history模式的前端vue配置与后端配置

				
			

			

				

					WanweI897的博客
				

				

					01-06
					
					4120
					
				

			

		

		

			
				
Web/static/ 表示项目部署路径，每个人的路径不一样，vue默认路径是根路径/，如果你项目不是部署在根路径，那就需要修改一些配置。history模式需要后端配合，具体的后端配置可以在网上找到，方法是获取不到资源时将url重写到 /index.html。特别注意的是，如果你的项目没有部署在根路径，那么你需要写入完整路径，例如 /Web/static/index.html。1.配置路由history模式并配置base。index.html 表示项目入口文件。/index 表示项目首页的路由地址。

			
		

	





	

		

			

				
					
VUE History模式后端配置例子

				
			

			

				

					ASP.NET
				

				

					09-14
					
					834
					
				

			

		

		

			
				
vue-router默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。

如果不想要很丑的 hash，我们可以用路由的history 模式，这种模式充分利用history.pushStateAPI 来完成 URL 跳转而无须重新加载页面。


const router = new VueRouter({
  mode: 'history',
  routes: [...]
})


当你使用 history 模式时，URL 就...

			
		

	





	

		

			

				
					
vue-router history模式前后端相应配置

				
			

			

				

					qq_34295211的博客
				

				

					03-06
					
					2091
					
				

			

		

		

			
				
vue路由有hash和history两种模式。hash模式路由路径如下http://localhost:8081/#/about,history模式路由路径如下http://localhost:8081/about。

  配置history模式前端需要在初始化路由实例的时候把mode设为history



  本地运行效果如下：



此外服务器中的nginx配置文件中的l...

			
		

	





	

		

			

				
					
Vue Router HTML5 History 模式 前后端配置

				
			

			

				

					高先生的猫
				

				

					08-14
					
					953
					
				

			

		

		

			
				
vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。

如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。


  const router = new VueRouter({
    mode: 'history',
    routes: [...]
  })



当你使用 history 

			
		

	





	

		

			

				
					
vue-router路由模式设置history模式

				
			

			

				

					weixin_42864357的博客
				

				

					03-29
					
					1090
					
				

			

		

		

			
				
vue-router路由模式设置history模式。

			
		

	





	

		

			

				
					
介绍Vue router的history模式以及如何配置history模式

				
			

			

				

					m0_62396648的博客
				

				

					07-08
					
					8745
					
				

			

		

		

			
				
history模式使用浏览器的history API来管理路由状态，而不是依赖于URL中的哈希。在history模式下，URL看起来更加整洁，没有#符号。例如，history模式可以在不刷新整个页面的情况下，通过改变URL来切换页面，实现更加流畅的用户体验。

			
		

	





	

		

			

				
					
vue路由history模式下nginx后台配置

				
			

			

				

					05-01
				

			

		

		

			
				
Vue路由的History模式是一种利用浏览器的History API来实现路由跳转的模式，它的优点在于可以消除URL中的#号，并且更加美观，但需要后台支持。在使用Nginx作为后台服务器时，需要对Nginx进行相关配置。

首先，在Nginx的配置文件中需要添加如下配置：

```
location / {
    try_files $uri $uri/ /index.html;
}
```

以上配置表示如果请求的文件或目录不存在，则转发到index.html，这样Vue的前端路由就能够正常运作。

另外，还需要配置Nginx的静态资源目录，例如：

```
location /static/ {
    root /var/www/myapp;
}
```

表示请求/static/文件时，将交由/var/www/myapp目录下的文件处理。

需要注意的是，如果使用Vue的History模式，很可能会出现“404页面找不到”的错误，因为Nginx接收到的URL都是以/开头的，Nginx会将这些URL视为文件路径进行处理，而不是Vue路由中的路径。这时候需要对Nginx进行进一步配置，例如：

```
location /app/ {
    try_files $uri $uri/ /app/index.html;
}
```

表示所有以/app/开头的请求都交由/app/index.html处理，这样就可以解决404页面找不到的问题。

总之，对于Vue路由的History模式，需要在Nginx服务器上进行相关的配置，保证前后端的对接顺畅，使得应用程序能够正常运行。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
鲨鱼辣椒面丶

			
你的鼓励将是我创作的最大动力

		

	

	

			

	

	

    ¥1
    ¥2
    ¥4
    ¥6
    ¥10
    ¥20
	

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

			
您的余额不足，请更换扫码支付或充值

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值