vue.js 2.6 use :to="leading to a component " and :href="leading to a web page" a-CodePudding

I am working in a Vue.js app with vue router doing a sidebar menu, and I want this behavior:

when clicking on it in the menu render a component AND open a new web page in new window

as far I've tried I only can do one thing or the other

<v-list-item " target="_blank" :href="'https://google.com'" >

   <v-list-item-title>universal</v-list-item-title>

</v-list-item>

and also

<v-list-item " :to="'universal'" >

   <v-list-item-title>universal</v-list-item-title>

</v-list-item>

is there a way to achieve both behaviors... if I place both props it renders the component in a new page

thanks in advanced

CodePudding user response：

Just use a method to do both things:

<v-list-item @click="onClicked" >
   <v-list-item-title>universal</v-list-item-title>
</v-list-item>

//In script:
methods: {
    onClicked() {
        this.$router.push('/universal');
        window.open('google.com', '_blank'); 
    }
}

CodePudding user response：

You can use .native modifier on click event:

const Home = { template: `<b>home</b>`}
const Component1 = { template: `<p>UniversaL</p>`}
const routes = [
    { path: '', component: Home },
    { path: '/universal', component: Component1 },
]
const router = new VueRouter({
    routes
});
new Vue({
  router,
  vuetify: new Vuetify(),
  data() {
    return {
      site: null
    }
  },
  methods: {
    otherPage() {
      window.open('www.google.com', '_blank');
    }
  }
}).$mount('#app')

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
  <v-app>
    <v-main>
      <v-container>
        <router-view></router-view>
        <v-list-item @click.native="otherPage" :to="'/universal'">
           <v-list-item-title>universal</v-list-item-title>
        </v-list-item>
      </v-container>
    </v-main>
  </v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.6.5/vue-router.min.js" integrity="sha512-hyOQvTtBERvssSiEFSSccyA/ZImk0QLpP92CuKgClbrc72zcMRUVapwZb/6IC0669Q0GWCu4/EhswVJcC0kwXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>