[英]Error with VueJs router-link element
Every time I click on one of my vuejs router-link elements in my app.blade.php page navigation bar, I end up getting an error on my console as seen below 每次我在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>
The code below shows how I implemented my router-links within my navigation bar. 下面的代码显示了如何在导航栏中实现路由器链接。
<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>
Can someone please explain why I get this error? 有人可以解释为什么我会收到此错误吗?
you are trying to change your props
element inside vue component. 您正在尝试在vue组件中更改
props
元素。 Use data
for that purposes. 为此目的使用
data
。
Hopefully this helps someone. 希望这对某人有帮助。
My problem was that I registered a global mixin in main.js
with the following function: 我的问题是我使用以下函数在
main.js
注册了一个全局mixin:
Vue.mixin({
methods: {
to(name, params) {
this.$router.resolve({ name, params });
},
},
});
Just rename or remove this configuration and all RouterLink errors dissapear. 只需重命名或删除此配置, 就会消失所有RouterLink错误。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.