Vue 2 Laravel 5.3 Vue-router 2 设置 Vue-router 的正确方法

Posted 2023-02-22

【中文标题】Vue 2 Laravel 5.3 Vue-router 2 设置 Vue-router 的正确方法

【英文标题】：Vue 2 Laravel 5.3 Vue-router 2 Proper way to set up Vue-router

【发布时间】：2017-05-29 15:15:47

【问题描述】：

只是想在点击某些东西时设置一个简单的重定向。不知道如何使用 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>

点击主页时出错

未捕获的类型错误：无法读取未定义的属性“推送”

EDIT#1（在 app.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
);

【问题讨论】：

有人可以帮我吗？

【参考方案1】：

您似乎没有将路由器注入您的应用程序，因此它是“未定义的”

要注入路由器，请在 app.js 中的 Vue 应用程序中进行以下更改：

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

之后，您可以在整个应用程序中使用this.$router。

---

其他方法：

您必须从app.js 导入router，如下所示：

从 './path/to/app 导入路由器

然后你可以简单地使用：

router.push

【讨论】：

感谢您的回复@saurabh，我已经尝试了您的第一个建议，但控制台日志返回错误 Uncaught RangeError: Maximum call stack size exceeded at RegExp.exec () at RegExp.[Symbol. match] (native) at String.match (native)

我在 app.js 中添加了无意义/过多的代码吗？

@warmjaijai 我认为现在不需要Vue.use(VueRouter);，请查看fiddle。

感谢@saurabh，我按照您的说法进行了编辑（请参阅我的问题）并且最大呼叫错误消失了。但是，当我单击主页时，旧错误仍然存​​在：未捕获的类型错误：无法读取未定义的属性“推送”

我也尝试在我的 Navbar-main.vue 中使用 router-link，但它说我没有注册。