vue地址栏直接输入路由无效问题

公众号:前端很忙

vue 项目只要不是静态页面,一般都会和官方的路由管理器 vue-router 一起使用。

最近项目有一个需求,是在地址栏输入路由,跳转到对应路由组件,在开发环境中这样做是可以跳转的,但是项目打包后,通过地址栏跳转会报错。

因为 vue 在页面上显示哪个组件是根据 vue-router 进行控制的,在地址栏上直接输入路由名称,并不能触发 vue-router 的规则,所以只能通过监听地址的改变,利用回调函数在组件内部进行动态修改路由。

方式一:history 模式

vue-router 默认是 hash 模式,通过更改模式为 history 模式可以解决这个问题,但是这需要后端配合,更改服务端配置,虽然过程稍麻烦但也是一个办法,有兴趣的朋友可以查看往期文章 https://blog.youkuaiyun.com/Bs__Q/article/details/83180931

方式二:hashchange 事件

什么是 hash?

hash 就是 URL 地址中 # 字符后面的字符串。

更改它不会导致整个页面重新加载,而且可以定位到元素 id 或 name 与之相同的位置(锚点)。

window.location.hash 可以获取到 hash。比如 localhost:8080/#/abcde 的 location.hash="#/abcde"。

通过监听 hash 的状态,来动态修改 vue-router 的路由,是页面进行组件切换,这样就不会导致页面报错或 404 了。

当 hash 被修改时,将触发 hashchange 事件(IE8 +支持):

window.addEventListener('hashchange',function(e) {
	console.log(e.oldURL); 
	console.log(e.newURL)
},false);

所以在 App.vue 中添加此事件:

mounted(){
	window.addEventListener('hashchange',()=>{
		var currentPath = window.location.hash.slice(1); // 获取输入的路由
		if(this.$router.path !== currentPath){
			this.$router.push(currentPath); // 动态跳转
		}
	},false);
}

这样即可解决,在地址栏输入路由跳转无效问题。

公众号:前端很忙
前端公众号【前端很忙】
### 解决路由路径跳转至首页无效问题 当遇到路由路径跳转到首页时出现无效的情况,通常是因为路由配置不当或是调用方式存在问题。以下是几种可能的原因及其解决方案: #### 1. 检查路由配置文件中的定义 确保在路由配置中已正确定义了通往首页的路径。例如,在 Vue Router 中应如下设置[^3]: ```javascript const routes = [ { path: '/', name: 'Home', component: Home, meta: { title: "首页" } }, ]; ``` #### 2. 使用命名视图或重定向来增强可靠性 如果直接通过 `/` 访问出现问题,则可以通过为根路径添加一个显式的重定向规则指向具体名称的组件,从而提高访问的成功率。 ```javascript { path: '/', redirect: {name:'Home'} } ``` #### 3. 正确使用 `$router.push()` 方法进行导航操作 对于动态编程式导航而言,应当采用官方推荐的方式来进行页面间的切换。比如要前往名为 `'Home'` 的路由,应该这样做: ```javascript this.$router.push({ name: 'Home'}) // 或者如果你更喜欢基于URL路径的形式 this.$router.push('/') ``` #### 4. 处理历史模式下的哈希变化事件 有时浏览器地址栏的变化并不会触发预期的行为,特别是在使用 HTML5 History Mode 下。此时可以在应用初始化阶段监听 popstate 事件并作出相应处理;而在 Hash Mode 下则需关注 hashchange 事件。 ```javascript window.addEventListener('popstate', function(event){ console.log("History state changed!"); }); // 对于hash模式下 window.onhashchange = () => { // 执行必要的逻辑... }; ``` 以上措施有助于排查和修复由于各种原因造成的路由跳转失败现象。值得注意的是,还需确认项目依赖版本兼容性以及是否存在其他潜在冲突因素影响正常工作流程。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值