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

Question

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.



   universal

and also



   universal

Is there a way to achieve both behaviors? If I place both props it renders the component in a new page.

userqDhy · Answer

Just use a method to do both things:


   universal


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

Nikola Pavicevic · Answer

You can use .native modifier on click event:

const Home = { template: `home`}
const Component1 = { template: `UniversaL`}
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')

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

2 Answers