页面跳转总结

Posted 2021-01-28 wheatcatcher

一、 a标签阻止跳转：

方法1： javascript 伪协议 不跳转
<a href="Javascript:;">link</a>

方法2： Javascript 伪协议 不跳转 link
<a href="Javascript:void(0);">link</a>

方法3： 在浏览器中， 如果一个锚点不存在， 那么也不会跳转。 link
<a href="###">link</a>

方法4： 阻止了浏览器执行默认行为 link
<a href="#" onclick=" action(); return false;">link</a>

二、 原生js跳转：

1、 location的href属性：

//js跳转主要是通过window的location对象的href属性， 因为location对象本来就是表示的浏览器窗口window的location， 那肯定就是这个决定网页的url。
function jumurl() {
window.location.href = ‘http://www.baidu.com‘;
}
setTimeout(jumurl, 3000);

 

2、 open方法：

window.open(

  ‘page.html‘, //弹出窗口的文件名；

  ‘newwindow‘,//弹出窗口的名字（不是文件名），非必须，可用空‘代替；

  ‘height=100, width=400, top=0,left=0, //窗口高度,距离屏幕上方的象素值

  toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no‘

)

 

3、 history对象的三个方法： 返回

window.history.back(-1);

window.location.replace(‘要转向的页面‘); //这样不会有历史记录

 

4、 location的assign方法： 用于百度谷歌点击进入跳转， 直接打开网站不跳转：

var s = document.referrer;

if (s.indexOf("google") > 0 || s.indexOf("baidu") > 0 || s.indexOf("yahoo") > 0)

location.href = "http://www.mahaixiang.cn/";

 

5. 阻止跳转：

window.onbeforeunload = function() {
  return "onbeforeunload is work";
}

window.onbeforeunload = function(event) {
  event.returnValue = "我在这写点东西...";
};

三、 router跳转：

 

<router-link
　　:to="{
　　　　path: ‘yourPath‘,
　　params: {
　　　　name: ‘name‘,
　　　　dataObj: data
　　},
　　query: {
　　　　name: ‘name‘,
　　　　dataObj: data
　　}
　　}"

>
</router-link>

 

methods: {
  getParams() {

  // 取到路由带过来的参数 let routerParams = this.$route.params.dataobj;

  //js遍历
var storage = window.localStorage;
for(var i=0;i<storage.length;i++){
  //key(i)获得相应的键，再用getItem()方法获得对应的值
  document.write(storage.key(i) + " : " + storage.getItem(storage.key(i)) + "");
}

// 将数据放在当前组件的数据内

this.msg = routerParams;

//【切换页面】

// 1.字符串 this.$router.push(‘/home/first‘);

//2. 对象 this.$router.push({ path: ‘/home/first‘ });

// 3.命名的路由

this.$router.push({
  name: ‘home‘,
  params: {
    userId: wise
  }
});

this.$router.push({
  path: ‘yourPath‘,
  name: ‘要跳转的路径的 name,在 router 文件夹下的 index.js 文件内找‘,
  params: {
      name: ‘name‘,
      dataObj: this.msg
  },

  /*query: { name: ‘name‘, dataObj: this.msg }*/

});

//【跳转新页面】

let {href} = this.$router.resolve({path: ‘/home/first‘});

window.open(href, ‘_blank‘);

},

watch: {
// 监测路由变化,只要变化了就调用获取路由参数方法将数据存储本组件即可
‘$route‘: ‘getParams‘ ,
}