以下是一個被封裝的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>

本文來自部落格園，作者：不如飼豬，轉載請註明原文連結：https://www.cnblogs.com/ifeelthecall/p/15401189.html