Vue 2 Laravel 5.3 Vue-router 2 Правильный способ настройки Vue-router

Question

Просто хотите настроить простое перенаправление при нажатии на что-то. Не знаете, как использовать vue-router для этого. Пожалуйста, найти мои коды ниже:

app.js

import VueRouter from 'vue-router'; 

Vue.use(VueRouter); 

const router = new VueRouter({ 
    routes: [ 
    { path: '/', redirect: '/' }, 
    { path: '/product', redirect: '/product' } 
    ] 
}); 

const app = new Vue({ 
    el: '#app' 
}); 

NavBar-main.vue

<template> 
    <ul class="nav navbar-nav"> 
    <li class="nav-item nav-item-left navbar-btn" @click.prevent="goToHome()" @mouseover.prevent="hoverIcon('home')" @mouseleave.prevent="hoverIcon('')"> 
     <div class="nav-link nav-main" :class="[{ 'navbar-home-hover' : hovered == 'home' },{ 'navbar-home' : hovered !== 'home' }]">Home <span class="sr-only">(current)</span></div> 
    </li> 
    <li class="nav-item nav-item-left navbar-btn" @click.prevent="goToProduct()" @mouseover.prevent="hoverIcon('product')" @mouseleave.prevent="hoverIcon('')"> 
     <div class="nav-link nav-main" :class="[{ 'navbar-product-hover' : hovered == 'product' },{ 'navbar-product' : hovered !== 'product' }]">Product</div> 
    </li> 
    <li class="nav-item nav-item-left navbar-btn" @mouseover.prevent="hoverIcon('blog')" @mouseleave.prevent="hoverIcon('')"> 
     <div class="nav-link nav-main" :class="[{ 'navbar-blog-hover' : hovered == 'blog' },{ 'navbar-blog' : hovered !== 'blog' }]">Blog</div> 
    </li> 
    <li class="nav-item nav-item-left navbar-btn" @mouseover.prevent="hoverIcon('mktInfo')" @mouseleave.prevent="hoverIcon('')"> 
     <div class="nav-link nav-main" :class="[{ 'navbar-mktInfo-hover' : hovered == 'mktInfo' },{ 'navbar-mktInfo' : hovered !== 'mktInfo' }]">Market Info</div> 
    </li> 
    </ul> 
</template> 


<script> 
    export default { 
    data(){ 
     return{ 
     hovered: '', 
     } 
    }, 
    methods:{ 
     hoverIcon(input){ 
      var vm = this 
      vm.hovered = input 
     }, 
     goToHome(){ 
      this.$router.push('/'); 
     }, 
     goToProduct(){ 
      this.$router.push('/product'); 
     } 
    } 
    } 
</script> 

ошибку на мыши дома

Uncaught TypeError: Cannot read property 'push' of undefined

EDIT # 1 (на приложение. js)

import VueRouter from 'vue-router'; 

Vue.use(VueRouter); //this is deleted 

const router = new VueRouter({ 
    routes: [ 
    { path: '/', redirect: '/' }, 
    { path: '/product', redirect: '/product' } 
    ] 
}); 

const app = new Vue({ 
    el: '#app', 
    router //this is added in this edit 
}); 

Answer 1

Похоже, что вы не инъекционного маршрутизатор в приложение, следовательно, быть «не определено»

Чтобы придать маршрутизатор сделайте следующие изменения в приложение Вью в app.js:

const app = new Vue({ 
    el: '#app', 
    router // inject the router 
}); 

После этого вы можете использовать this.$router во всем приложении.

---

Другой подход:

Вы должны импортировать router из app.js, как следующее:

импорта маршрутизатор из»./path/to/app

и после этого вы можете просто используйте:

router.push