[Vuejs]-Vue.js 2.6 use :to="leading to a component " and :href="leading to a web page" at the same time, is it possible?

by

2👍

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'); 
    }
}
👤Yitz

1👍

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/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/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/vue@2.x/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/vuetify@2.x/dist/vuetify.js"></script>
👤Nikola Pavicevic

Leave a comment