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

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

Box.vue

<template>
  <div class="box">
    <div class="grid-content bg-purple">
      <div
        class="title-style"
 @click="openUrl(url)"
      >{{title}}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: 'hello world'
    },
 url:{ 20  type:String, 21       default:'https://www.baidu.com'
 } 23   },
  methods:{
25     openUrl(url){
26       window.open(url,"_blank");
27       //_blank : 在新窗口打开
28       //_self : 在当前窗口打开
29       
30       //window.location.href = url : 当前页面重定向
31     }
  }
}
</script> 

<style>
</style>