vue二级路由跳转后外部引入js失效问题解决方案

vue路由可以通过children嵌套,于是可以形成二级路由等等。。。

案例如下:

routes: [
{
path: '/',
name: 'dy',
component: dy,
children:[
{path: '/',
name: 'tdy',
component: tdy
},
{path: '/tdy',
name: 'tdy',
component: tdy
},
{path: '/tjs',
name: 'tjs',
component: tjs
},
{path: '/thy',
name: 'thy',
component: thy
},
{path: '/tdq',
name: 'tdq',
component: tdq
},
{path: '/twd',
name: 'twd',
component: twd
},
{path: '/tlx',
name: 'tlx',
component: tlx
}
]
},
当使用vue路由的时候,可以在index.html里面引入外部js

当一级路由进行跳转时,一级路由js可以使用,但是二级路由js失效。


    一级路由


  二级路由


解决方案如下:

在js代码里面设置,当一级路由点击时,让js文件重新加载。

原因是路由跳转原理1. 在地址中加入#以欺骗浏览器,地址的改变是由于正在进行页内导航 
2. 使用H5的window.history功能,使用URL的Hash来模拟一个完整的URL。

当路由跳转,页面刷新,当时js不会重新加载,所以二级路由的js会失效!

猜你喜欢

转载自www.cnblogs.com/LittleT/p/9077727.html