当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中使用路由?
提前致谢
答案 0 :(得分: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();
}
}