项目总结之vue Router中的跳转自动加上#/

最新推荐文章于 2023-04-04 16:13:15 发布
最新推荐文章于 2023-04-04 16:13:15 发布
阅读量3.6k 收藏 1
点赞数 1
分类专栏： 项目总结 vue2.x
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaolinlife/article/details/89479381
版权

最近弄懂一个小问题，就想着先总结下来。是关于vue Router的跳转问题，就是如果引入了vue-router，例如给一个这样的链接https:www.app/index.html，但是真正在浏览器中输入后执行的时候就变成了 https:www.app/index.html#/，为什么呢？原来是因为引入了vue-router，引入vue-router后，再点开链接的时候，会自动加上#/，因为vue-router是根据锚点来进行定位的,也就是根据hash值来跳转的（单页面应用）。只要程序中引入了vue-router，跳转的时候会自动加上#/的，至于具体原因，这个我看过源码后会补充上来的。

时清云
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue.js实战之利用vue-router实现跳转页面
10-20
对于单页应用，官方提供了vue-router进行路由跳转的处理，这篇文章主要给大家介绍了Vue.js实战之利用vue-router实现跳转页面的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。
vue router 跳转后回到顶部的实例
10-18
今天小编就为大家分享一篇vue router 跳转后回到顶部的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
使用vue-router会在地址栏自动添加/#/号
weixin_40667613的博客
08-01 4308
https://segmentfault.com/q/1010000009134004
解决vue项目访问地址自动添加#号问题
Feb_ruary的博客
07-25 6918
新建一个vue项目，访问地址url后自动添加#号，很不美观。
关于vue路由中/#的问题
qq_45632139的博客
05-14 3223
1.为什么会出现#？ 因为我们搭建的环境默认用的hash mode，所以路由上会有#， 2.如何解决？ 在src/route下的index.js文件里添加一行即可解决该问题 import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' Vue.use(Router) export default new Router({ routes: [ {
vue-router跳转时打开新页面的两种方法
10-16
主要给大家介绍了关于vue-router跳转时打开新页面的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用vue-router具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
vue url跳转解析和参数编码
blake321的博客
03-22 6623
1. 背景 最近在做url跳转的时间遇到几个问题,故在此记录一下 1.1 vue获取当前url url参数是挂载在 this.$route对象上的,其中query对象是所有参数的集合,fullPath是参数字符串形式,类似下面的 // 比如当前的url为 // https://www.blakeyi.com/msgtrace/?startTime=1647864978687&endTime=1647951378687 this.$route = { query:{ startTime:"16
vue-router中的#
feiyu_may的博客
09-11 3354
    vue工程搭建完成后，我们运行在浏览器中打开，会发现url中多了一个#符号，     有#是使用URL hash模式的缘故，#代表网页中的一个位置，右边的字符就是该位置的标识符，从#开始的部分就是URL的锚部分，vue-router默认的是hash模式，如果觉得#在url中影响美观，可以更改为history模式。     history模式不带#号，需要服务器配置。     前端...
vue项目页面地址自动添加#号的问题
qq_27474555的博客
07-31 1万+
vue项目页面地址自动添加#号的问题 1、原因 vue路由默认是hash，改成history模式 2、方法 配置路由模式，例如： export default new Router({ mode: 'history', routes: [{ path: '/', name: 'Hello', component: Hello }] }) }) 3、后续问题处...
VUE 跳转链接去掉中间#号
小洪帽i的博客
04-04 1350
VUE 跳转链接去掉中间#号
VUE地址栏中跳转总有#号
m0_37549178的博客
07-08 1222
项目里的地址栏中总会有#号显示，取消掉它 //路由配置index const router = new VueRouter({ routes mode:'history'//默认是hash，hash就会有# })
vue项目地址栏自动加#
peppa_pig的博客
01-16 2301
vue的路由在默认的hash模式下,url会带有一个#,不美观,而且在微信分享,授权登录等都会有一些坑.所以history模式（不带#号）也会有一些应用场景. 1、将路由配置成history模式的方法： 配置路由模式，例如： export default new Router({ mode: 'history', routes: [{ path: '/', name: '...
Vue 页面跳转不用router-link的实现代码
08-27
主要介绍了 Vue 页面跳转不用router-link的实现代码，文中给大家介绍了vue router-link跳转传值示例,需要的朋友可以参考下
烽火2640路由器命令行手册-05-路由器配置命令
浩秦的博客
11-25 185
路由配置命令 目 录 第1章 RIP配置命令... 1 1.1 RIP配置命令... 1 1.1.1 auto-summary. 2 1.1.2 default-information originate. 3 1.1.3 default-metric. 3 1.1.4 ip rip authentication. 4 1.1.5 ip rip message-digest-key. 5...
vue 中跳转路由的几种方式
haotian667的博客
04-19 335
在main.js中，window.location.href="/#/login". this.router.push(′/login′)对比获取当前的路由：this.router.push('/login')对比获取当前的路由：this.router.push(′/login′)对比获取当前的路由：this.route.path
Flask的完整运行
G_SANGSK的博客
06-20 6526
完整运行的flask实例 from flask import Flask ​ app = Flask(__name__) #创建flask的实例 ​ ​ # @app.route('/') #路由 访问地址 127.0.0.1:5000 或 127.0.0.1:5000/ # @app.route('/index') #路由 访问地址 127.0.0.1:5000/index @app.rou...
vue路由的四种跳转方式
RistonTea的博客
12-18 7743
一、router-link 1. 不带参数 <router-link :to="{name:'aa'}"> <router-link :to="{path:'/bb'}"> //name,path都行, 建议用name // 注意：router-link中链接如果是'/'开始就是从根路由开始，比如当前此时的路由是xxx/aa，:to="/bb",点击后路径就是xxx/...
vue项目访问路径#号的问题
流楚丶格念的博客
03-24 5946
是vue项目启动之后，输入http://ip:port，我发现浏览器里面显示的地址栏竟然是http://ip:port/#/，这个”/#/“不知道是什么东西，于是百度查了一下。 原因：对于vue开发的单页面应用，我们在切换不同的页面的时候，可以发现html永远只有一个，这也正是称之为单页面的原因。而vue-router默认hash模式--------使用URL的hash来模拟一个完整的URL，于是当URL改变时，页面不会重新加载。因为对于正常的页面来说，更换url一定是会导致页面更换的，而只有更换url中的
cordova Ionic 和cordova的区别是什么（项目总结）
热门推荐
时清云的博客
06-21 2万+
现在的项目是移动端的，所以需要用cordova调用原生的设备，例如摄像头等，然后就是由于之前接触过ionIC，所以就它们之间的区别特意总结了一下。 很多新朋友ionic基础教程都学完了，还是不知道ionic 和cordova 是什么关系 ionic是什么： Ionic(ionicframework)一款开源的Html5移动App开发框架,是AngularJS移动端解决
vue+router路由跳转不起作用
最新发布
07-15
### 回答1： Vue Router 是 Vue.js 官方的路由管理器，用于实现单页应用 (SPA) 的路由功能。如果在使用 Vue Router 过程中出现路由跳转不起作用的情况，可能是以下几个原因导致的。 1. 路由配置错误：首先要检查路由配置是否正确。在 vue-router 的配置文件中，定义了路由的路径(path)和对应的组件(component)，确保路径和组件名称正确匹配。 2. 路由链接错误：在模板中使用 router-link 指令生成链接时，确保链接的 to 属性与路由配置中的路径匹配。如果 to 属性是一个变量，也要确保该变量的值与路由配置相匹配。 3. 缺少路由出口：在初始化 Vue 实例时，需要在模板中配置一个 router-view 标签用于显示匹配到的组件。如果没有在模板中添加此标签，跳转时组件将无法显示。 4. 路由模式设置错误：Vue Router 支持多种路由模式，包括 hash 模式和 history 模式。如果未正确设置路由模式，可能导致路由无法正常跳转。在创建 Vue Router 实例时，可以使用 mode 选项指定路由模式。 5. 路由守卫阻止跳转：Vue Router 提供了路由守卫功能，可以在路由跳转前进行一些操作，如判断用户是否登录等。如果在路由守卫中返回 false 或调用 next(false) 阻止路由跳转，就会导致路由不起作用。检查路由守卫的逻辑是否正确。 6. 其他原因：如果以上情况都没有发生，可能是其他代码逻辑或结构问题导致的。可以仔细检查代码，或者提供更多具体的错误信息，以便进一步分析和解决问题。 总之，当遇到 Vue Router 路由跳转不起作用的问题时，一定要认真排查问题的可能原因，逐个排除错误，以找到正确的解决方法。 ### 回答2： 当Vue Router的路由跳转不起作用时，可以考虑以下一些可能的原因和解决方案： 1. 确保Vue Router已正确安装和配置。首先，需要在项目中安装Vue Router，并将其作为Vue实例的插件来使用。在Vue实例中应该有一个路由器对象，其中包含路由规则和要跳转的路径。 2. 检查路由路径是否正确。确保要跳转的路径在路由规则中存在，并且路径与实际跳转时使用的路径相匹配。可以使用路由对象的`push`或`replace`方法来进行路由跳转，这些方法可以接收一个路径参数。 3. 确保路由器视图被正确渲染。在Vue组件中，应该有一个包含`<router-view>`标记的容器，这是用于显示路由组件的地方。如果路由没有正确显示，可能是因为没有正确放置`<router-view>`标记。 4. 检查路由的钩子函数是否正确使用。Vue Router提供了几个钩子函数，例如`beforeEach`和`beforeResolve`，可以用于在路由跳转之前进行某些操作，如验证用户身份等。如果这些钩子函数中的逻辑有问题，可能会导致路由跳转不起作用。 5. 检查浏览器的控制台输出。当发生路由错误时，通常会在浏览器的控制台中显示相关错误信息。通过查看控制台输出，可以更好地了解问题的具体原因。 总结：当Vue Router的路由跳转不起作用时，可以先检查Vue Router的安装和配置是否正确，然后检查路径是否正确，确保正确渲染路由视图，检查路由的钩子函数和浏览器控制台输出，以找出问题所在并解决。 ### 回答3： 当vue-router的路由跳转不起作用时，可能有以下几个原因： 1. 路由路径配置错误：检查路由配置文件中的路径是否正确。确保路径前面没有多余的斜杠或其他字符，并且完全匹配路由路径。 2. 没有使用router-link组件：如果没有使用对应的router-link组件，直接在代码中使用`router.push()`或`this.$router.push()`方法进行跳转是无效的。 3. 路由实例未创建：在使用路由跳转之前，需要确保已经创建了Vue Router实例，并将其注入到Vue实例中。示例代码如下： ```js import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) const router = new VueRouter({ routes: [ // 路由配置 ] }) new Vue({ router, // 其他Vue实例配置 }).$mount('#app') ``` 4. 路由跳转方式错误：在使用`router.push()`方法进行跳转时，需要传入一个对象参数，示例代码如下： ```js this.$router.push({ path: '/example' }) ``` 如果需要在路由跳转中传递参数，可以使用`query`或者`params`选项，如： ```js // 使用query传递参数 this.$router.push({ path: '/example', query: { id: 1 } }) // 使用params传递参数 this.$router.push({ path: '/example', params: { id: 1 } }) ``` 5. 浏览器不支持HTML5 History模式：如果使用了HTML5 History模式进行路由跳转，在一些不支持HTML5 History API的浏览器中会导致路由跳转失败。可以尝试切换为Hash模式，或者使用polyfill来解决兼容性问题。 这些是常见的导致vue-router路由跳转失败的原因，通过检查以上几个方面可以尝试解决问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值