Vue 路由器不渲染/挂载根路径组件 [英] Vue router does not render/mount root path component
问题描述
我正在使用 vue、vue-router 和 laravel 制作页面，当我输入 localhost/时出现问题myproject/public_html/，Home 组件未在 router-view 中呈现，如果我单击指向 Service 组件的路由器链接，它会呈现内容正常，当我单击主路径时，它会呈现主组件内容，那么为什么会发生这种情况?这是我的 app.js 结构
从'vue'导入Vue从 'vue-router' 导入 VueRouterVue.use(VueRouter)从'./views/App'导入应用程序从./views/Home"导入主页从./views/Service"导入服务const 路由器 = 新的 VueRouter({模式:'历史'，路线:[{小路: '/'，name: '家',组件:首页},{路径:'服务'，'name' : '服务',组件:服务}],});const app = new Vue({el: '#app',组件:{应用}，路由器，});这是我的 App.vue
<div>你好<router-link :to="{ name : 'services' }">服务</路由器链接><路由器视图></路由器视图></模板><脚本>从 '../components/PageLogo' 导入 PageLogo从'../components/Loading'导入加载导出默认{安装:功能(){console.log(this.$router.currentRoute.path)},成分 : {'页面标志':页面标志，'加载' : 加载},方法 : {ajaxOver:函数(){}}}
这是我的 Home.vue
<div class="row">主页<router-link :to="{ name : 'services' }">去服务</路由器链接></模板><脚本>导出默认{安装:功能(){console.log('你好')}}
这是Service.vue
<div>服务页面<router-link :to="{ name : 'home' }">回家</路由器链接></模板><脚本>导出默认{安装:功能(){console.log('服务')}}
我该如何解决这个问题?如果我在任何路由中重新加载页面，component 应该被挂载，但是在 vue 路由器中没有显示，所以 component 没有被挂载.
根据要求，在 App.vue 中的日志是 /myproject/public_html/
我以前从未使用过 Laravel，但我认为您正在寻找 基础.
Vue 文档:
<块引用>- 类型:字符串
- 默认值:/"
应用的基本 URL.例如，如果整个单页应用程序都在/app/下提供服务，则 base 应使用值/app/".
由于您在 localhost/myproject/public_html/ 上为您的项目提供服务，因此 vue 看到的是 /myproject/public_html/ 而不是 /.
您可以通过将基本路由添加到 vue-router 构造函数来更改此设置.
const router = new VueRouter({模式:'历史'，基础:'/myproject/public_html/',...}i am making a page with vue, vue-router and laravel, the problem, when i enter in localhost/myproject/public_html/, the Home component is not rendered in the router-view, if i click in the router link to the Service component, it render the content normally, and when i click to the home path it render the home component content, so why this happens? this is my app.js structure
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,
});
this is my 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>
this is my 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>
and this is 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>
so how can i solve this? if i reload the page in any route, the component should be mounted, but in the vue router is not being displayed, so the component is not mounted.
Edit:
As requested, in App.vue the log is /myproject/public_html/
I've never used Laravel before, but I think you're looking for base.
Vue docs:
- type: string
- default: "/"
The base URL of the app. For example, if the entire single page application is served under /app/, then base should use the value "/app/".
Since you're serving your project at localhost/myproject/public_html/, vue is seeing /myproject/public_html/ instead of /.
You can change this by adding the base route to the vue-router constructor.
const router = new VueRouter({
mode: 'history',
base: '/myproject/public_html/',
...
}
这篇关于Vue 路由器不渲染/挂载根路径组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
