vue router中mode history、base的作用说明

更新时间：2022年05月25日 15:44:03 作者：wx-18538561085

这篇文章主要介绍了vue router中mode history、base的作用说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

mode history、base的作用

mode history的含义

mode history 代表，路由不再显示hash，会像如下形式：

histroy

localhost:8080/user/list

hash

localhost:8080/#/user/list

base的含义

base也比较好理解，代表着是基本的路由请求的路径。参考：

如：base: ‘/app/’

那么所有的请求都会在url之后加上/app/

应用的基路径。例如，如果整个单页应用服务在 /app/ 下，然后 base 就应该设为 “/app/”

vue-router的base和mode配置项

路由代码如下

const router = new VueRouter({
  mode: 'history',
  base: '/vue',
  routes
})

1) mode

mode: 'history’表示，访问路径不带#号，如：http://localhost:8080/vue

在这里插入图片描述

2) base

配置单页应用的基路径，当点击路由时：

 <router-link to="/">Home</router-link> |
 <router-link to="/about">About</router-link>

会带上项目基路径，如:http://localhost:8080/vue/about

在这里插入图片描述

浏览器地址栏http://localhost:8080/vue/这样访问，表示是访问该项目

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

您可能感兴趣的文章:

Vue弹窗Dialog最佳使用方案实战
这篇文章主要为大家介绍了极度舒适的Vue弹窗Dialog最佳使用方案实战,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-11-11
Vue引入Stylus知识点总结
在本篇文章里小编给各位整理的是一篇关于Vue引入Stylus知识点总结内容，有需要的朋友们可以学习参考下。
2020-01-01
vue自定义指令directive实例详解
这篇文章主要介绍了vue自定义指令directive的相关资料，下面通过实例给大家介绍,需要的朋友可以参考下
2018-01-01
可控制缓存销毁的 keepAlive 组件实现详解
这篇文章主要为大家介绍了可控制缓存销毁的 keepAlive 组件实现详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-10-10
vue+echarts实现数据实时更新
这篇文章主要为大家详细介绍了vue+echarts实现数据实时更新，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
关于Vue中this.$set的正确使用
我们在项目开发的过程中，经常会遇到这种情况：为data中的某一个对象添加一个属性，我们该如何解决这个问题呢，下面小编给大家带来了Vue中this.$set的正确使用，感兴趣的朋友跟随小编一起看看吧
2022-12-12
vue-cli是什么及创建vue-cli项目的方法
vue-cli是 vue 官方提供的、快速生成 vue 工程化项目的工具，支持创建vue2和vue3的项目，本文给大家详细讲解vue-cli是什么及创建vue-cli项目的方法，感兴趣的朋友跟随小编一起看看吧
2023-04-04
Vue进度条progressbar组件功能
progressbar组件在一个可以直接运行的npm包，通过Yeoman进行构建，再通过Gulp+Webpack构建工具。这篇文章给大家介绍了Vue进度条progressbar组件
2018-04-04
Vue与Axios的传参方式实例详解
现在vue项目基本上都是使用axios进行请求操作,下面这篇文章主要给大家介绍了关于Vue与Axios的传参方式的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-08-08
Vue封装一个简单轻量的上传文件组件的示例
这篇文章主要介绍了Vue封装一个简单轻量的上传文件组件的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-03-03