vue router.resolve 解析地址 不要带 hash模式的#号

最新推荐文章于 2024-06-13 11:09:32 发布
最新推荐文章于 2024-06-13 11:09:32 发布
阅读量646 收藏
点赞数
分类专栏： vue 文章标签： javascript html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43245095/article/details/120778840
版权 
let router1 = this.$router.resolve({
	path: '#/bills/generateOrderDetail?orders_id=42810&parentPath=/bills/billsCPP',
});

let router2 = this.$router.resolve({
path: '#/bills/generateOrderDetail?parentPath=/bills/billsCP',
});
let router3 = this.$router.resolve({
path: '/bills/generateOrderDetail?orders_id=42810&parentPath=/bills/billsCP',
});
let router4 = this.$router.resolve({
path: '/bills/generateOrderDetail?parentPath=/bills/billsCP',
});
console.log('href1',router1.href);
console.log('href2',router2.href);
console.log('href3',router3.href);
console.log('href4',router4.href);

结果

在这里插入图片描述
带 hash模式 #号部分url重复 #/bills/generateOrderDetail?orders_id=42810&parentPath=/bills/billsCPP
解析获得的是 #/bills/generateOrderDetail#/bills/generateOrderDetail?orders_id=42810&parentPath=/bills/billsCPP

HHH 917
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue路由上的#/怎么去掉_vue路由history模式_如何去除vue项目中的#
weixin_36165323的博客
02-22 758
在使用vue围幸业很例站闪以近着好务多如宽动为近着好-cli搭建的环境中，浏览器上URL地址中是存在'#'的，这是由于vue-router 默认 hash 模式，不难发现#的出现真的很丑陋。官网给出了如何使用history模式，例如浏刚学互久维数曾总屏果以。公实式带近览开会。后护一相结蔽为我最司现幻的近览开会。后护一相结蔽为我最司现幻的近览开会。后护一相结蔽为我最司现幻的近览开会。后护一相结蔽为我...
若依前后端分离新窗口打开页面，如何使用this.$router.resolve解决
一米阳光的博客
11-21 5617
若依框架菜单打开新窗口展示页面，使用this.$router.resolve解决，详细步骤，一看就会
vue html 路由读取,vue 带参数跳转打开新窗口 $router.resolve 获取路由参数
weixin_36246992的博客
07-09 2614
如果参数在路径中：router.jspath: '/project/:id'var { href } = this.$router.resolve({path: '/project',query: {id: this.id}});window.open(href);获取参数：this.$route.query.id如果参数不在路径中：1.不打开新窗口：path: '/projectlist' , ...
vue项目 this.$router.resolve作用
最新发布
ivan5277的博客
06-13 829
是一个强大的工具，它帮助开发者在不实际执行导航操作的前提下，根据Vue Router的配置动态生成目标路由的URL信息，适用于需要灵活控制导航流程或处理URL相关逻辑的场景。方法是一个非常有用的API，主要用于生成一个URL对象，这个对象包含了导航到指定路由所需的所有信息。比如，你可以指定路由名称、传递参数、查询字符串等，使得生成的URL能够满足复杂的导航需求。：该方法接受一个参数，通常是通往另一个路由的路径、名称或者一个描述目标位置的对象。（目标路由的信息对象）等属性的对象。（生成的URL字符串）、
this.$router.resolve() 方法 （非 hash 模式 window.open() 打开页面）
工作中遇到问题记录
09-16 1万+
路由模式从 `hash` 模式换为 `history` 模式 `window.open()` 不能跳转了，使用this.$router.resolve() 方法 （非 hash 模式 window.open() 打开页面）
hash #怎么去掉
weixin_42727360的博客
05-09 2227
1、路由mode改为"history"; const router = new VueRouter({ mode: ‘history’, routes // （缩写）相当于 routes: routes }) 2、在项目配置文件中，这个是在 sever{}中如下面两种方式修改，这两种方法都行； location / { try_files $uri $uri/ @router; index index.html; } location @router { re
Vue router 怎样去掉 # 号前面的字符
一如既往的博客
02-14 611
Vue router 怎样去掉 # 号前面的字符
python sqlite3.OperationalError: unable to open database file
puhuihui的博客
11-23 1959
路径问题： conn=sqlite3.connect("G:\Python\douban\movie250top.db")
基于vue hash模式微信分享#号的解决
10-14
本文将详细介绍如何解决Vue Hash模式下微信分享时`#`号被去除的问题。 **问题描述：** 当使用Vue的Hash模式进行开发，并在微信环境中分享页面时，分享出去的链接会被微信处理，`#`号会被去掉，同时追加如`?...
vue-router.js
12-30
vue路由vue-router.js文件下载
解决vue.js this.$router.push无效的问题
10-18
今天小编就为大家分享一篇解决vue.js this.$router.push无效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue-router3.0版本中 router.push 不能刷新页面的问题
08-27
Vue Router 3.0 中 router.push 不能刷新页面的问题解决方案 Vue Router 3.0 中 router.push 不能刷新页面的问题是一个常见的问题，许多开发者都曾经遇到过这种情况。在这篇文章中，我们将详细介绍这个问题的原因...
去除vue路由跳转地址栏后的哈希值#
oceanheavenweb的博客
11-02 1万+
去除vue路由跳转地址栏后的哈希值#，我们只需要在路由跳转的管理文件router目录下的index.js中加上一句代码即可去掉哈希值# import Vue from 'vue' //1.引入vue-router import Router from 'vue-router' import find from '../components/find' import mall from
Vue 去除hash路由默认的#
热门推荐
cominglately的博客
05-27 1万+
场景 . vue 开启路由后，默认的路由中会带上'#', 不雅 解决 . 实例化路由规则的时候 const router = new VueRouter({ mode: ‘history’, history: true, routes // （缩写）相当于 routes: routes }) ...
【Vue】去掉默认地址栏的#以及后续问题
coralime的博客
02-24 2089
启动vue项目后，地址栏会默认带一个# 原因是vue-router提供了两种模式，一种Hash模式（默认），一种History模式。 vue-router 默认为 hash 模式，当 URL 改变时，页面不会重新加载，只是根据 hash 来更换显示对应的组件，这就是所谓的单页面应用。 在Hash模式下路由地址会默认带一个#，修改成History模式就行了。 在/router/index.js页面下，修改mode方式 const router = new VueRouter({ mode:
vue-router 去除#号
benben0729的专栏
03-14 3404
History 模式 vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。 如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。 const router = new VueRouter(...
vue 路由懒加载 resolve vue-router配置
asteriaV的博客
06-12 657
vue 路由懒加载 resolve作用： 如果用import引入的话，当项目打包时路由里的所有component都会打包在一个js中，造成进入首页时，需要加载的内容过多，时间相对比较长。 当你用require这种方式引入的时候，会将你的component分别打包成不同的js，加载的时候也是按需加载，只用访问这个路由网址时才会加载这个js。 你可以打包的时候看看目录结构就明白了。 懒加载 router/index.js import Vue from 'vue' import Router fro.
关于history与hash的路由模式
huhudeni的博客
12-30 305
前话：之前也想看这个，但是因为不太自己去写原生的路由。但是最近项目中用到了，就来补坑了
vue router 打开新窗口 router.resolve
sdaulee的博客
09-22 4875
constrouter=createRouter({routes}) //重写 constrouterPush=router.push router.push=(param)=>{ if(param.blank){ const{ href }=router.resolve(param) window.open(href,'_blank') }else{ routerPush.call(router,...
vue3 router.resolve的使用
08-10
在 Vue 3 中，`router.resolve` 是一个用于解析路由的方法。它可以用来获取指定路径的路由信息，例如路由的组件、参数和元数据等。 使用 `router.resolve` 的基本语法如下： ```javascript const { route, href } = router.resolve(location) ``` 其中，`location` 是一个用于描述路由的对象，可以是一个字符串路径，或者是一个包含 `name`、`params`、`query` 等属性的对象。 下面是一个示例： ```javascript import { createRouter, createWebHistory } from 'vue-router' const router = createRouter({ history: createWebHistory(), routes: [ { path: '/users/:id', name: 'user', component: UserComponent } ] }) const { route, href } = router.resolve('/users/1') console.log(route) // 输出解析后的路由信息 console.log(href) // 输出解析后的完整路径 ``` 在上述示例中，我们通过 `router.resolve('/users/1')` 解析了路径 `/users/1` 对应的路由信息。然后通过 `route` 和 `href` 分别获取了解析后的路由对象和完整路径。 需要注意的是，`router.resolve` 方法只是用于解析路由，不会触发路由导航。如果需要进行路由跳转，可以使用 `router.push` 或 `router.replace` 方法。 希望这能帮到你！如果还有其他问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值