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>

当我检查元素时，我看到router-link标签没有被转换。我在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作为“ app”，如下所示：

public class JettyServerDeploymentManager implements JettyServer {

    private Server server;

    private DeploymentManager deployer;

    private AppProvider appProvider;

    public void start() throws Exception {
        server  = new Server(8090);

        // Setup Connector
        ServerConnector connector = new ServerConnector(server);
        server.setConnectors(new Connector[] {connector});

        // Handler Tree location for all webapps
        ContextHandlerCollection contexts = new ContextHandlerCollection();


        // Deployment Management
        deployer = new DeploymentManager();
        deployer.setContexts(contexts);
        appProvider = new WebAppProvider();
        ((WebAppProvider) appProvider).setMonitoredDirName("/mytmpdir");
        deployer.addAppProvider(appProvider);
        server.addBean(deployer);


        // Handler Tree
        HandlerCollection handlers = new HandlerCollection();
        handlers.addHandler(contexts);
        handlers.addHandler(new DefaultHandler());
        server.setHandler(handlers);


        server.start();
        server.join();
    }

}

VueJs路由器链接在Laravel

1 个答案: