vue 点击实现跳转到外部链接

以下是一个被封装的box组件,在父组件中点击该组件可以实现打开一个新页面:

Box.vue

 1 <template>
 2   <div class="box">
 3     <div class="grid-content bg-purple">
 4       <div
 5         class="title-style"
 6         @click="openUrl(url)"
 7       >{{title}}</div>
 8     </div>
 9   </div>
10 </template>
11 
12 <script>
13 export default {
14   props: {
15     title: {
16       type: String,
17       default: 'hello world'
18     },
19     url:{
20       type:String,
21       default:'https://www.baidu.com'
22     }
23   },
24   methods:{
25     openUrl(url){
26       window.open(url,"_blank");
27       //_blank : 在新窗口打开
28       //_self : 在当前窗口打开
29       
30       //window.location.href = url : 当前页面重定向
31     }
32   }
33 }
34 </script> 
35 
36 <style>
37 </style>

 

posted @ 2021-10-13 11:03  不如饲猪  阅读(2498)  评论(0编辑  收藏  举报