我正在制作一个页面vue
, vue-router
and laravel
,问题,当我进入localhost/myproject/public_html/
, the Home
组件未渲染在router-view
,如果我单击指向服务组件的路由器链接,它会正常渲染内容,而当我单击主路径时,它会渲染主组件内容,那么为什么会发生这种情况呢?这是我的app.js
结构
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import App from './views/App'
import Home from './views/Home'
import Service from './views/Service'
const router = new VueRouter({
mode: 'history',
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: 'servicios',
'name' : 'services',
component: Service
}
],
});
const app = new Vue({
el: '#app',
components : { App },
router,
});
这是我的App.vue
<template>
<div>
Hola
<router-link :to="{ name : 'services' }">
ir a servicios
</router-link>
<router-view>
</router-view>
</div>
</template>
<script>
import PageLogo from '../components/PageLogo'
import Loading from '../components/Loading'
export default {
mounted : function(){
console.log(this.$router.currentRoute.path)
},
components : {
'page-logo' : PageLogo,
'loading' : Loading
},
methods : {
ajaxOver : function() {
}
}
}
</script>
这是我的 Home.vue
<template>
<div class="row">
Home page
<router-link :to="{ name : 'services' }">
go to services
</router-link>
</div>
</template>
<script>
export default {
mounted: function() {
console.log('hola')
}
}
</script>
这是 Service.vue
<template>
<div>
Services page
<router-link :to="{ name : 'home' }">
go to home
</router-link>
</div>
</template>
<script>
export default {
mounted : function(){
console.log('services')
}
}
</script>
那么我该如何解决这个问题呢?如果我在任何路线中重新加载页面,component
应该已经挂载了,但是在 vue 路由器中没有显示,所以component
未安装。
Edit:
根据要求,在 App.vue 中日志是/myproject/public_html/