vue如何给页面增加url前缀
目录
- vue页面增加url前缀
- vue路径上设置指定的前缀
- 解决
- 总结
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项目获取url中的参数(亲测可用)
目录 情况一:内部页面之间互相传值 情况二:外部跳转VUE项目时自带参数 1 获取?后面的参数 2 获取不带?的URL中的参数 亲测可用,若有疑问请私信 获取url参数有两种情况: 情况一:内部页面之间互相传值 这里先讲情况一,因为同一项目内互相传值比较简单,假如要从A页面跳转到B页面,并传值.就要在A页面这么写 this.$router.push({name:"B",query:{ Id : this.tId , ... }}) 进入B页面之后,在B页面内这么写 this.Id =
-
vue 接口请求地址前缀本地开发和线上开发设置方式
开发环境 config/dev.env.js 'use strict' const merge = require('webpack-merge') const prodEnv = require('./dev.env') module.exports = merge(prodEnv, { NODE_ENV: '"development"', API_ROOT: '"https://www.dev.com"' //本地请求前缀 }) 线上开发环境 config/pr
-
Vue在外部配置打包文件夹名称和url地址前缀
在public中添加以下两个js文件 config_build.js: module.exports = { //打包文件夹名 OUTPUT_DIR: 'test', //浏览器url地址前缀.需要同步更改config_settings.js中的ROUTE_PREFIX ROUTE_PREFIX: '/test/' } vue.config.js: const config_build = require('./public/config_build') module.exports = { p
-
vue如何给页面增加url前缀
目录 vue页面增加url前缀 vue路径上设置指定的前缀 解决 总结 vue页面增加url前缀 在main.js中找到这段代码 const createRouter = () => new Router({ mode: 'history', // require service support scrollBehavior: () => ({ y: 0 }), routes: constantRoutes }) 加上 base: 'web', //页面路由前缀 修改后代码: co
-
vue中如何给静态资源增加路由前缀
目录 vue给静态资源增加路由前缀 说说vue中的~(静态资源处理) Webpacked 资源 资源处理规则 总结 vue给静态资源增加路由前缀 在vue.config.js中找到这段代码: 找到publicPath,这个就是静态资源的默认路径,默认值是/,也就是静态资源默认路径是你的域名+路径,所以我们只需修改publicPath的值,就可以达到加前缀的效果,修改后效果如下: 现在你页面上的所有静态资源路径都会加上web前缀了 说说vue中的~(静态资源处理) Webpacked 资源 首先要
-
webpack4打包vue前端多页面项目
之前一直用的脚手架,这次自己搭建webpack前端项目,花费了不少心思,于是做个总结. 1.用法 项目结构如下: project |- bulid <!-- 这个目录是自动生成的--> |- public |- css |- js |- page1.html <!-- 插件生成的html文件--> |- page2.html <!-- 插件生成的html文件--> ... |- public/ <!-- 存放字体.图片.网页模板等静态资源--> |- src
-
Vue SPA单页面的应用和对比
目录 一.什么是SPA 二.SPA和MPA的区别 三.单页应用的优缺点 四.怎么解决SPA首屏加载速度慢 1.什么是首屏加载 2.加载慢的原因 3.解决方案 一.什么是SPA SPA(single-page-application)就是单页应用. 它通过动态重写当前页面来与用户交互,这种方法避免了页面之间切换打断用户体验在单页应用中,所有必要的代码(HTML.JavaScript和CSS)都通过单个页面的加载而检索,或者根据需要(通常是为响应用户操作)动态装载适当的资源并添加到页面页面在任何时间
-
利用webstrom调试Vue.js单页面程序的方法教程
前言 使用 webstrom 调试 Vue.js 单页面程序,理论上来说应该是支持所有用 webpack 构建的应用程序 webstrom 版本:2017.1 代码:使用 vue-cli 构建的基础单页面应用 修改 webpack 配置 由于 webpack 把所有文件全部打包到一起,所以我们需要 webpack 提供给我们一个源地图 修改 devtool 为 source-map 这是我的开发配置文件 webpack.dev.conf.js module.exports = merge(bas
-
Vue.js 单页面多路由区域操作的实例详解
单页面多路由区域操作 在一个页面中有两个及以上的<router-view>区域,需要通过设置路由的index.js,来操作这些区域的内容 App.vue 中设置: <router-view></router-view> <router-view name="left" style="float: left;width: 50%; height: 300px;background-color: #ccc;"></r
-
vue axios 在页面切换时中断请求方法 ajax
如下所示: Vue.prototype.$ajax=axios; const CancelToken = axios.CancelToken; let cancel; let cancelAjaxText = '中断成功'; Vue.prototype.post = function(url,data,loading){ var ajax = Vue.prototype.$ajax({ method: 'post', url:url, data: data, cancelToken: new C
-
解决vue 路由变化页面数据不刷新的问题
每天记录一点点,把我遇到的问题记录下来, 希望可以帮助到更多和我遇到同样问题的人. 问题描述:通过调接口,动态显示帮助页面的问题列表, 问题列表有多级,当点击的这个问题没有下一级问题的时候跳入内容页. 问题出在,我在电脑上做移动端页面的时候,相继跳到详情页,我想返回,点击 按钮,直接跳转到了如上第一张图的样子,no,no,no,这不是我想要的结果,此刻,想到了通过改变url来改变页面的层级问题. 一级的parent为0,默认不显示或显示. 二级的parent为1,点击一级路由变为如图: 点击进入
-
ajax请求+vue.js渲染+页面加载的示例
1.导入js <script type="text/javascript" src="<c:url value="/resources/lib/jquery/jquery-1.11.0.min.js" />"></script> <!--标准mui.css--> <link href="<c:url value=" rel="external nofollo
-
vue.js多页面开发环境搭建过程
利用 vue-cli 搭建的项目大都是单页面应用项目,对于简单的项目,单页面就能满足要求.但对于有多个子项目的应用,如果创建多个单页面,显示有点重复,特别是 node_modules 会有多份相同的.如果全部放到单页面项目下,又显得有点乱,这时候通过改造 vue-cli 搭建的项目为多页面,就是一个比较好的解决方法. 如何改造单页面 vue.js 项目为多页面项目?下面是这次改造的具体过程. 一.创建单页面 vue.js 项目 这里直接使用官方提供的脚手架 vue-cli3 创建,具体的过程请
随机推荐
- 解决AJAX请求中含有数组的办法
- jQuery基于$.ajax设置移动端click超时处理方法
- 微信小程序实战之运维小项目
- Linux进程间通信--使用信号
- cmd SETLOCAL使用介绍
- 解析在.net中使用XSLT转换xml文档的示例详解
- c#剪切板操作的简单实例
- python实现读取命令行参数的方法
- Vue.js学习示例分享
- MySQL中主键索引与聚焦索引之概念的学习教程
- JSP开发导引
- jQuery实现背景滑动菜单
- java 查找list中重复数据实例详解
- 深入讲解java线程与synchronized关键字
- GridView单元格合并
- 无数据库的详细域名查询程序PHP版(1)
- Android开发自学笔记(二):工程文件剖析
- java实现学生信息管理系统
- nodejs和react实现即时通讯简易聊天室功能
- 使用Webpack提升Vue.js应用程序的4种方法(翻译)