vue 直接输入路由地址进入_vue地址栏直接输入路由无效问题的解决

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

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

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

方式一：history 模式

vue-router 默认是 hash 模式，通过更改模式为 history 模式可以解决这个问题，但是这需要后端配合，更改服务端配置，虽然过程稍麻烦但也是一个办法，有兴趣的朋友可以查看往期文章。

方式二：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);

}

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

补充：Vue路由——ie上地址栏输入路由页面不更新

情景：在ie11上从当前A页面(/a)跳转B页面(/b)，在地址栏直接修改路由回车跳转B页面，发现页面还是A页面，但是地址栏地址已经是B页面地址。而且控制台并无报错。

解决方法：在App.vue中添加判断ie加手动修复：

mounted () {

if (!!window.ActiveXObject || 'ActiveXObject' in window) {

window.addEventListener('hashchange', () => {

let currentPath = window.location.hash.slice(1)

if (this.$route.path !== currentPath) {

this.$router.push(currentPath)

}

}, false)

}

onhashchange事件ie8就已经支持了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

vue 直接输入路由地址进入_vue地址栏直接输入路由无效问题的解决相关推荐

vue动态设置文字布局方式_VUE+Canvas实现输入文字生成对应的字体图片小功能
你是不是经常浏览字体网站的时候,发现他们的"字体生成器"和预览功能很好奇,为什么输入框输入文字之后,点击预览,下面都会修改对应的字体内容,以便达到了没有安装字体也可以预览这个字体效 ...
ts watch路由参数变化_vue watch 监听路由变化
首页列表页购物车会员中心 import store from "../../store" import { mapState, mapActions } from " ...
Vue获取当前路由地址以及当前页面的地址
最近在做一个电商项目,其中搜索功能封装成一个组件用在多个路由组件中,用户通过输入相关商品名进行搜索,其中要实现的一个点就是:要是当前为商品页面则更新商品列表,若不是商品页面,则新开一个商品窗口. 实现 ...
vue 跳转到指定路由地址（可附带参数）
1. vue 使用 router-link 跳转到指定路由地址使用 router-link <span class="product-justify" @click=&qu ...
vue中如何获取当前路由地址
vue获取当前路由地址 1.router和$route的区别 $router: 路由操作对象,只写.需要对路由进行操作时使用.如路由跳转 $route: 路由信息对象,只读.获取路由相关信息时使用.如 ...
vue刷新页面如何保证路由不变_vue 刷新之后嵌套路由不变重新渲染页面的方法...
vue 刷新之后嵌套路由不变重新渲染页面的方法解决嵌套路由刷新时,路由没有变化,正常情况下页面是不会重新渲染的 1.在router-view中加上条件渲染 v-if 默认为true.让它显示出来 ...
vue 刷新嵌套路由_vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法...
解决vue-router嵌套路由(子路由)在history模式下刷新无法渲染页面的问题,具体内容如下一. 异常描述本来使用的是vue-router的hash模式,但是hash模式下url需要带&q ...
vue 跳转路由后返回上一页还是当前页面，但是路由地址有改变（已解决）
问题描述: 在开发vue项目的时候,涉及到路由跳转,前面的一顿操作配置路由的都很舒畅,跳转返回啥的都没问题.问题是啥呢,我在做个有视频播放的页面的时候,由于代码是参考别人的(狗头),导致在首页点击跳转 ...
vue 路由地址不跳转解决办法
这里写自定义** vue 路由地址不跳转解决办法这是我的报错原因,因为我是一个后端开发对vue不了解我的报错原因是因为: menu.json 中的路径 path:****** name***** ...
vue获取上一个页面路由地址
项目需求是需要在当前页面获取上一个路由地址,并根据不同地址进行请求不同接口和页面样式调整的操作.记录一下: 需要用到vue-router的beforeRouterEnter钩子其实也就是一个组件内的 ...

vue 直接输入路由地址进入_vue地址栏直接输入路由无效问题的解决

vue 直接输入路由地址进入_vue地址栏直接输入路由无效问题的解决相关推荐

最新文章

热门文章