Vue Router兼容子项目路径变更为主项目兼容，路径替换

最新推荐文章于 2024-10-16 18:35:07 发布
最新推荐文章于 2024-10-16 18:35:07 发布
阅读量152 收藏
点赞数
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kingdomwar/article/details/131091361
版权
文章讲述了如何在Vue项目中，通过Vuerouter配置将旧的项目部署路径www.test.com/old/*重定向到新的部署地址www.test.com/*。具体做法是在Vuerouter中添加一个匹配旧路径的规则，并在全局钩子router.beforeEach中处理路径，将所有包含/old/的路径替换为，实现路径的平滑过渡。
摘要由CSDN通过智能技术生成

旧项目部署为www.test.com/old/****

新的部署地址为www.test.com/***

在vue router配置中添加一项

{

        path:'/old/:p*//,

        component:sdfsf,//此处component为空也行

}

添加全局钩子

router.beforeEach((to,from)=>{

        

if(to.path.indexOf('/old')!=-1){

        return to.path.replace('/old','')

    }

})

kingdomwar
关注
12 使用Vue+Vue-router+el-menu实现菜单功能实战
xingyu_qie的专栏
04-10 8357
我们将继续维护添加Vue-router的路由数据,借助ElementUI的el-munu组件，来实现左侧菜单功能的实战，并自己实现一个el-menu组件
vue-router安装和配置方式以及路由默认路径
qq_46071321的博客
01-03 1382
vue-router安装和配置方式认识vue-router安装和使用vue-router 认识vue-router vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面富应用。 可以访问其官方网站对其进行学习：传送门 vue-router是基于路由和组件的。 路由用于设定访问路径，将路径和组件映射起来。 在vue-router的单页面富应用中，页面的路径的改变就是组件的切换。 安装和使用vue-router 步骤一：安装vue-router npm ins
VueRouter路由使用（二）
weixin_60968779的博客
03-27 902
认识vue-router、模式、嵌套、v-slot、路由导航守卫
vue2 vue-route兼容问题
YingUser的博客
02-25 1811
这个是配置好页面路由后跑不起来，就会报错，原因是 vue-router 的兼容性问题 当时下载脚手架的时候，vue2版本，而现在 vue-router版本是4.0了，不兼容vue2，可能会兼容vue3，所以需要下载稳定版本 vue-router@3.5.2 ...
vue router地址替换_Vue的生命周期（钩子函数在生命周期中的意义）
weixin_29214335的博客
01-25 429
每个vue实例被创建都要经过一系列初始化过程--例如需要设置（数据监听）（编译模板）将实例挂载到DOM并在数据和变化时更新DOM，在更新过程中也会运行一些生命周期钩子：钩子函数例如：created/mounted/updated/destroyed实力创建后执行代码(this指向上下文调用它的vue实例)new Vue({ data:{a:1},created:function(){ }})new...
vue2和vue-router的兼容性问题
HOLLOW_W的博客
03-14 706
出现页面上的这个原因 主要是因为下载的vue-router是最新版本的，不支持vue2，所以下载稳定版本vue-rouetr@3.5.2版本就可以解决上面的问题了
Vue----路由(Vue2与Vue3)
emmmm.....
04-18 1598
1 前端路由的概念与原理 1.1 什么是路由 1.1.1 后端路由 1.1.2 SPA 1.1.3 前端路由 1.2 前端路由的工作方式 ``` ``` 2 vue-router 的基本使用 2.1 vue-router 2.1.1 vue-router 的版本 2.2 vue-router 3.x 的基本使用步骤 2.2.1 在项目中安装 vue-router 2.2.2 创建路由模块 2.2.3 导入并挂载路由模块 2.2.4 声明路由链接和占位符 2.2.5 声明路由的匹配规则 2.2.6 完成代码
如何找到vue项目路径_如何获取vue单文件自身源码路径
weixin_42190623的博客
01-30 5819
这个问题要从一个想法说起。D2Admin是一个开源的，前端中后台集成方案，原先是基于 vue-cli2，大概是向 vue-cli3 过渡时，作者老李，想在页面右下角加个 Toggle 点击，跳到当前页面源码对应的 github 页面。确实很实用的功能，D2Admin 的 Demo 页面太多了，想看某个页面的源码，对于不熟悉项目目录结构的新手很不友好。这些页面统一为 .vue 组件，那么转换一下：如...
如何找到vue项目路径_vue cli3.0打包上线静态资源找不到路径的解决操作
weixin_35343856的博客
12-23 2457
项目中遇到打包之后静态资源路径找不到，报如下错误：解决方法是：在项目的根目录下创建vue.config,js文件，在里面配置静态资源的路径，publicPath是配置静态资源路径的属性，vue.config,js文件的代码如下：module.exports = {publicPath: './'}补充知识：vue-cli3 npm run build 打包后静态资源的配置 vue.config.j...
vue项目如何设置@路径提示，@代替src
你喜欢大熊猫嘛
06-13 1290
vue项目如何设置@路径提示，@代替src
用微前端 qiankun 接入十几个子应用后，我遇到了这些问题
LuckyWinty的博客
12-18 2019
点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群简单了解微前端微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。微前端具备以下特点：技术栈无关：主框架不限制接入应用的技术栈，子应用具备完全自主权独立开发、独立部署：既可以组合在一起运行，也可以单独运行。增量升级：在面对各种复杂场景时，我们通常很难对一个已经存在的系统做全量的技术栈升级或重构，而微...
Vue路由切换的两种方式
qq_51133939的博客
08-11 6987
vue路由切换的两种方式：1. 标签切换；2. js切换
关于vue-router路径配置的问题（此文主要是记录三级路由的访问路径，以及安装、路由组件、路由重定向）
qq_56715703的博客
03-09 3888
node路由：用户根据不同的url地址，来访问不同的页面vue路由（客户端）：组件结合路由规则来构建单页面应用。
vue $router和$route的区别
锦年的博客
03-28 5724
vue-router中经常会操作的两个对象route和router两个。 1、$route对象 $route对象表示当前的路由信息，包含了当前 URL 解析得到的信息。包含当前的路径，参数，query对象等。 1、 $route.path ：字符串，对应当前路由的路径，总是解析为绝对路径，如"/foo/bar"。 2、$route.params ：一个 key/value 对象，包含了 动态片段 和 全匹配片段， 如果没有路由参数，就是一个空对象。 3、$route.quer
router-link 地址可以改变，但是router-view不渲染
Celine
11-09 5610
1、看到这个标题百度，很多出现的问题都是单词拼写错误，比如export default new Router( { routes: [ { path：'\', component:home } ] })很多强调的就是上面的routes不能有错误,因为很多人写的时候哦会写成routers2、我的错误是因为当时用vue-cl
request.getRealPath的替换方法
xzw_123的专栏
06-15 3906
request.getRealPath("") 这个方法已经不推荐使用了 替换方法为： request.getSession().getServletContext().getRealPath("") 得到站点的绝对地址 如request.getSession().getServletContext().getRealPath(File.separator) 得到项目的绝对路
vue递归遍历router，修改path路径
weixin_41022957的博客
04-28 1324
data() { return { routeData: [ { path: "/index", name: "index", children: [ { path: "/home", children: [ { path: "/index", ...
vue-router 实时动态替换路由参数（(地址栏)参数）
u013746071的专栏
06-08 8814
应用场景： 例如：页面上有多个tab，点击不同的tab，跳转到不同的页面上去，再次返回的时候，需要知道上次点击的是哪个tab，这样不用存缓存，直接改路由参数，然后直接返回就可以了； 用法如下： import merge from 'webpack-merge'; //如果路由没有参数name,就新增一个参数，如果有的话，就是修改name的值 //可以修改多个参数 this.$router.push({ query:merge(this.$route.query,{'name':'小米'}) });
jeecg3版本的vue，离线启动
最新发布
sharesb的博客
10-16 309
jeecg的vue2版本已经停止维护，所以只能用vue3的版本。3版本中使用的是pnpm（npm的增强版本）下载依赖。使用pnpm安装的node_modules，不能直接复制到离线主机中（因为在 pnpm安装过程中，会给依赖的配置文件写死绝对路径，并且会在c盘生成缓存）。所以要在离线主机中启动，需要1.在联网机器上下载依赖保存到某个文件夹2.在离线主机中安装node，并配置环境变量3.在离线主机中，让npm加载第一步下载的依赖4.在离线主机中，npm正常安装。
Vue CLI3项目路径问题详解与解决
"Vue CLI3搭建的项目中路径相关问题的解决" 在Vue CLI3搭建的项目中，路径问题经常困扰开发者。这篇分享主要探讨了如何有效地处理这些路径问题，为开发者提供参考。Vue CLI3是一个强大的脚手架工具，用于快速初始化...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值