vue如何给页面增加url前缀

 更新时间:2022年12月09日 09:49:22   作者:对这是我的昵称  
这篇文章主要介绍了vue如何给页面增加url前缀问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

vue页面增加url前缀

在main.js中找到这段代码

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

加上

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

修改后代码:

const createRouter = () => new Router({
  mode: 'history', // require service support
  base: 'web',
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

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

vue路径上设置指定的前缀

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

解决

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

export default new Router({
  mode: 'history', //后端支持可开
  # base: '/wtlicence',
  scrollBehavior: () => ({
    y: 0
  }),
  routes: constantRouterMap
});

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

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

export default new Router({
  mode: 'history', //后端支持可开
  base: '/wtlicence',
  scrollBehavior: () => ({
    y: 0
  }),
  routes: constantRouterMap
});

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

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue百度地图实现定位和marker拖拽监听功能

    Vue百度地图实现定位和marker拖拽监听功能

    这篇文章主要介绍了Vue百度地图实现定位和marker拖拽监听功能,实现思路非常简单,本文结合实例代码效果图给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-11-11
  • vue2中使用quill编辑器+表格功能(步骤详解)

    vue2中使用quill编辑器+表格功能(步骤详解)

    这篇文章主要介绍了vue2中使用quill编辑器+表格功能,本文分步骤结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-09-09
  • Vue中使用import进行路由懒加载的原理分析

    Vue中使用import进行路由懒加载的原理分析

    这篇文章主要介绍了Vue中使用import进行路由懒加载的原理分析。具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue+moment实现倒计时效果

    vue+moment实现倒计时效果

    这篇文章主要为大家详细介绍了vue+moment实现倒计时效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-08-08
  • 使用 vue.js 构建大型单页应用

    使用 vue.js 构建大型单页应用

    本文给大家详细介绍了如何使用使用 vue.js脚手架工具vue-cli构建大型单页应用的方法,非常的实用,有需要的小伙伴可以参考下
    2018-02-02
  • vue实现循环滚动图片

    vue实现循环滚动图片

    这篇文章主要为大家详细介绍了vue实现循环滚动图片,多图片轮播,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • Vue的自定义组件不能使用click方法的解决

    Vue的自定义组件不能使用click方法的解决

    这篇文章主要介绍了Vue的自定义组件不能使用click方法的解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • vue实现多个echarts根据屏幕大小变化而变化实例

    vue实现多个echarts根据屏幕大小变化而变化实例

    这篇文章主要介绍了vue实现多个echarts根据屏幕大小变化而变化实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • vue3封装轮播图组件功能的完整步骤

    vue3封装轮播图组件功能的完整步骤

    我们都知道,轮播图组件模板结构通常是ul包裹li的结构,在vue中,li的数量也通常是由后端接口返回的数据决定,下面这篇文章主要给大家介绍了关于vue3封装轮播图组件功能的相关资料,需要的朋友可以参考下
    2022-11-11
  • ant design vue动态循环生成表单以及自定义校验规则详解

    ant design vue动态循环生成表单以及自定义校验规则详解

    这篇文章主要介绍了ant design vue动态循环生成表单以及自定义校验规则详解,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01

最新评论