- 首页
- 前端开发
- Laravel VueJs:`router-view` 不渲染组件
Laravel VueJs:`router-view` 不渲染组件
[英] Laravel VueJs : `router-view` does not render the component
本文介绍了Laravel VueJs:`router-view` 不渲染组件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我知道这个网站上有这样的问题，但它们并不能解决我的问题.因此这个问题在这里弹出:
在我的 Laravel 5.3 和 VueJs 应用中，app.js 文件中的 Vue 根实例指向 App.vue 和 App.vue 我有 router-view 占位符.所以我希望页面组件在占位符内呈现，但事实并非如此.
让我显示不同文件中的内容:
在 web.php 我有:
Route::get('/listing/{listing}', function(Listing $listing){$model = $listing->toArray();return view('app',['model' => $model]);});
在 router.js 中，我有:
从'vue'导入Vue；从 'vue-router' 导入 VueRouter；从 '../components/ListingPage' 导入 ListingPage；Vue.use(VueRouter);导出默认的新 VueRouter({模式:'历史'，路线:[{ 路径:'/listing/:listing'，组件:ListingPage，名称:'listing' }]});
在 app.js 我有:
import ListingPage from '../components/ListingPage.vue';从'./router'导入路由器；从'../components/App.vue'导入应用程序；var app = new Vue({el: '#app',渲染:h =>h(应用程序),路由器});
所以当我点击 url /listing/5 时，应用程序转到 App.vue 并且应该呈现 ListingPage 组件router-view 占位符内.
在 App.vue 中，我有:
<div><div id="工具栏"><router-link :to="{ name: 'home' }"><img class="icon" src="/images/logo.png"><h1>vuebnb</h1></路由器链接>
<路由器视图></路由器视图>
在 ListingPage.vue 中，我有:
<模板><div><div class="容器"><div class="heading">从列表页面标题
<小时><div class="关于"><h3>关于此列表页面</h3>
<脚本>导出默认{数据() {返回 {指数:1}}}
但最后我只获得了 App.vue 中的内容，而没有在占位符内呈现 ListingPage 组件.
我怎样才能在那里获得正确的渲染?
其实这个问题出自《全栈 Vue.js 2 和 Laravel 5' by Anthony Gore.源代码可在 github 此处获得.我尝试在 Chapter07 运行代码库.当然，我使用 Laravel 5.5.6 版本 在 localhost 中运行了必要的命令，例如 composer install、npm install、npm run dev 但最后当我点击了任何像 /listing/5 这样的 URL，我没有看到任何从 ListingPage 组件呈现的内容.
您可以从 github 获取代码，也可以从 此处下载 在您的本地主机中运行.
它不起作用的原因以及潜在的解决方案是什么?
解决方案
我认为里面"render: h => h(App)" 你可以使用
组件:{App}，模板:'<应用程序>'
那么 app.js 代码将如下所示:
从'./router'导入路由器；从'../components/App.vue'导入应用程序；var app = new Vue({el: '#app',组件:{应用}，模板:'<App></App>',路由器});
我希望有效.
最好的问候！
I know such questions are out there in this site but they do not solve my problem. Hence this question pops up here :
In my Laravel 5.3 and VueJs app, the root instance of Vue in app.js file points to App.vue and in App.vue I have the router-view placeholder. So I expect page components to be rendered inside the placeholder but that does not happen.
Let me show the contents in different files:
In web.php I have :
Route::get('/listing/{listing}', function(Listing $listing){
$model = $listing->toArray();
return view('app',['model' => $model]);
});
In router.js, I have :
import Vue from 'vue';
import VueRouter from 'vue-router';
import ListingPage from '../components/ListingPage';
Vue.use(VueRouter);
export default new VueRouter({
mode:'history',
routes:[
{ path: '/listing/:listing', component: ListingPage, name: 'listing' }
]
});
In app.js I have :
import ListingPage from '../components/ListingPage.vue';
import router from './router';
import App from '../components/App.vue';
var app = new Vue({
el: '#app',
render: h => h(App),
router
});
So when I hit the url /listing/5, the application goes to App.vue and is supposed to render the ListingPage component inside router-view placeholder.
In App.vue, I have :
<template>
<div>
<div id="toolbar">
<router-link :to="{ name: 'home' }">
<img class="icon" src="/images/logo.png">
<h1>vuebnb</h1>
</router-link>
</div>
<router-view></router-view>
</div>
</template>
In ListingPage.vue, I have :
<template>
<div>
<div class="container">
<div class="heading">
Heading from listing page
</div>
<hr>
<div class="about">
<h3>About this listing page</h3>
</div>
</div>
</template>
<script>
export default {
data() {
return {
index: 1
}
}
}
</script>
But finally I only get the content in App.vue without the ListingPage component being rendered inside the placeholder.
How can I get the proper rendering there ?
EDIT:
Actually this questions arises out of the source code of the book 'Full-Stack Vue.js 2 and Laravel 5' by Anthony Gore. The source code is available at github here . I tried to run the codebase at Chapter07. Of course I ran the necessary commands such as composer install, npm install, npm run dev in localhost with Laravel 5.5.6 version but finally when I hit any URL like /listing/5, I do not see any content rendered from ListingPage component.
You can take the code from github or you may download it from here to run in your localhost.
What might be the reason that it does not work and the potential solution as well ?
解决方案
I think that inside of
"render: h => h(App)" you can use
components: {App},
template: '<App></App>'
Then the app.js code will be like:
import router from './router';
import App from '../components/App.vue';
var app = new Vue({
el: '#app',
components: {App},
template: '<App></App>',
router
});
I hope that works.
best regards!
这篇关于Laravel VueJs:`router-view` 不渲染组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
