代码之家  ›  专栏  ›  技术社区  ›  Carlos Salazar

Vue路由器不呈现/装载根路径组件

  •  0
  • Carlos Salazar  · 技术社区  · 6 年前

    我正在写一页 vue , vue-router 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>
    

    这是我的家.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>
    

    this is the first load of the page, as you can see, the home component content is not being loaded

    if i click in the service link, it show the content of the service component if i click in the service component to go to home, it show the home component content

    那我怎么解决这个问题呢?如果我在任何路径中重新加载页面, component 应该安装,但Vue路由器中没有显示,因此 成分 未安装。

    编辑:

    根据要求,在app.vue中,日志是 /myproject/public_html/

    1 回复  |  直到 6 年前
        1
  •  1
  •   Adam Piziak    6 年前

    我以前从来没有用过Laravel,但我想你在找 base .

    Vue文档:

    • 类型:字符串
    • 默认值:“/”

      应用程序的基本URL。例如,如果整个单页应用程序在/app/下提供服务,那么base应该使用值“/app/”。

    因为你在 localhost/myproject/public_html/ ,Vue看到了 /myproject/public_html/ 而不是 / .

    您可以通过将基本路由添加到Vue路由器构造函数来更改此设置。

    const router = new VueRouter({
        mode: 'history',
        base: '/myproject/public_html/',
        ...
    }