VueJs 路由器链接元素出错答案

【问题标题】：Error with VueJs router-link elementVueJs 路由器链接元素出错
【发布时间】：2018-08-01 20:57:55
【问题描述】：

每次我在 app.blade.php 页面导航栏中单击我的 vuejs 路由器链接元素之一时，我最终都会在控制台上收到如下所示的错误

 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "to"

 found in

 ---> <RouterLink>
   <Root>

下面的代码显示了我是如何在导航栏中实现路由器链接的。

<ul class="navbar-nav ml-auto">
                    <!-- Authentication Links -->
                    @guest
                        <li class="nav-item">
                            <a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
                        </li>
                    @else
                        <li class="nav-item"  id="navbarDropdown" class="nav-link" role="button" aria-haspopup="true" aria-expanded="false" style="padding: 15px; ">

                               <router-link style="color:black;" :to="{ name: 'home' }">Menu<i class="fa fa-home" style="margin-left:8px;"></i></router-link>
                        </li>

                        <li class="nav-item"  id="navbarDropdown" class="nav-link" role="button" aria-haspopup="true" aria-expanded="false" style="padding: 15px;">

                               <router-link style="color:black;" :to="{ name: 'orders' }">Orders <i class="fa fa-coffee" style="margin-left:8px;"></i></router-link>
                        </li>



                        <li class="nav-item"  id="navbarDropdown" class="nav-link" role="button" aria-haspopup="true" aria-expanded="false" style="padding: 15px;">

                               <router-link style="color:black;" :to="{ name: 'cart' }">Cart <i class="fa fa-shopping-cart" style="margin-left:8px;"></i></router-link>
                        </li>

谁能解释我为什么会收到这个错误？

【问题讨论】：

[Vue 警告]：$attrs 是只读的。在 ---> 中找到
这是我得到的第一个错误

标签： javascript laravel vue.js routerlink

【解决方案1】：

您正在尝试更改 vue 组件中的 props 元素。为此目的使用data。

【讨论】：

【解决方案2】：

希望这对某人有所帮助。
我的问题是我在main.js 注册了一个全局mixin，函数如下：

Vue.mixin({
  methods: {
    to(name, params) {
      this.$router.resolve({ name, params });
    },
  },
});

只需重命名或删除此配置，所有 RouterLink 错误都会消失。

【讨论】：