vue如何给页面增加url前缀

这篇文章主要介绍了vue如何给页面增加url前缀问题，具有很好的参考价值，希望对大家有所帮助。

vue页面增加url前缀

在main.js中找到这段代码

1. const createRouter = () => new Router({ 
2.   mode: 'history', // require service support 
3.   scrollBehavior: () => ({ y: 0 }), 
4.   routes: constantRoutes 
5. }) 

加上

1. base: 'web', //页面路由前缀 

修改后代码：

1. const createRouter = () => new Router({ 
2.   mode: 'history', // require service support 
3.   base: 'web', 
4.   scrollBehavior: () => ({ y: 0 }), 
5.   routes: constantRoutes 
6. }) 

现在你的每个页面都会有一个【web】前缀了

vue路径上设置指定的前缀

有时在使用项目的时候，我们都需要指定一个前缀路径（就像tomcat中的虚拟路径），这个时候在vue中如何使用呢。

解决

这个时候我们可以使用vue-router中的base这个属性，使用这个属性就可以在路径前面添加指定的前缀。

1. export default new Router({ 
2.   mode: 'history', //后端支持可开 
3.   # base: '/wtlicence', 
4.   scrollBehavior: () => ({ 
5.     y: 0 
6.   }), 
7.   routes: constantRouterMap 
8. }); 

这个时候的访问路径是： http://127.0.0.1:8080/login.

当我们使用vue-router的base属性的时候。

1. export default new Router({ 
2.   mode: 'history', //后端支持可开 
3.   base: '/wtlicence', 
4.   scrollBehavior: () => ({ 
5.     y: 0 
6.   }), 
7.   routes: constantRouterMap 
8. }); 

这个时候的访问路径是： http://127.0.0.1:8080/wtlicence/login