VUE项目前端页面http强制跳转到https

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script>
      function initUrl() {
        const isHttps = 'https:' === window.location.protocol ? true: false;
        const host = window.location.host
        if(!isHttps && host.indexOf('localhost') < 0){
          let url = window.location.href
          url = url.replace('http:','https:')
          window.location.href = url
          return
        }
      }
      initUrl()
    </script>
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= webpackConfig.name %></title>
    <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
	 
  </head>
  <body>
    <div id="app">
	    <div id="loader-wrapper">
		    <div id="loader"></div>
		    <div class="loader-section section-left"></div>
		    <div class="loader-section section-right"></div>
		    <div class="load_title">正在加载系统资源,请耐心等待</div>
        </div>
	</div>
  </body>
</html>

Vue框架自带router路由跳转功能,实现了前端路由的实现。在实际开发中,有时候需要强制刷新页面,以便对页面内容进行更新。Vue提供了两种方式实现路由跳转强制刷新: 1. 通过路由参数添加一个随机数,在路由切换时强制刷新。 在路由对象的meta属性中添加一个随机数,每次切换路由时,强制重新加载页面,代码如下: ``` { path: '/home', name: 'Home', component: Home, meta: { requireAuth: true, refresh: true // 添加一个随机数,强制刷新页面 } } ``` 然后在路由切换钩子函数beforeEach中,判断meta中是否有refresh属性,如果有就重新生成一个路由地址,如下: ``` router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.requireAuth)) { if (store.getters.token) { if(to.meta.refresh) { // 判断是否刷新页面 to.path += '?refresh=' + Math.random() // 重新生成一个路由地址 } next() } else { next({ path: '/login', query: { redirect: to.fullPath } }) } } else { next() } }) ``` 2. 在跳转页面前手动执行window.location.reload()方法,强制刷新页面。 在vue-router路由中,通过执行window.location.reload()方法,实现页面强制更新,代码如下: ``` this.$router.push('/home').catch(err => {}) window.location.reload() ``` 以上两种方式可以实现Vue路由的强制刷新,根据实际需要选择使用。注意在使用强制刷新时,需要对页面数据进行重新加载和处理,避免出现数据的错误和不一致。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值