VueJs 路由器链接在 Laravel 中不起作用

Question

由于 Laravel 自带 vuejs，决定尝试实现路由器链接。

我在检查控制台时看到此错误：

Unknown custom element: <router-link> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

这就是我的 app.js 目前的样子：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Articles from './components/Articles.vue'
import Navbar from './components/Navbar.vue'

Vue.use(VueRouter);

const routes = [
    {
        path: '/', component: Articles
    },
    {
        path: '/contact', component: Navbar
    }

]
const router = new VueRouter({routes: routes})

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

在我的 app.blade 模板（laravel 默认自带的那个）上我添加了这个：

<li>
     <router-link class="nav-link" :to="'/'">Home</router-link>
</li>

当我检查元素时，我看到路由器链接标签没有被转换。 我在 y 依赖项中有 vue-router 和资源

"dependencies": {
    "vue-resource": "^1.5.0",
    "vue-router": "^3.0.1"
}

我的 aap.blade 文件我有组件

<div class="container">
    <articles></articles>
</div>

如何在 laravel 中使用路由？

提前致谢

Answer 1

请为您的容器 div 提供 id 作为“应用程序”，如下所示：

<div class="container" id="app">
    <articles></articles>
</div>