Question

我正在制作一个包含vue，vue-router和laravel的页面，问题是，当我输入localhost/myproject/public_html/时，Home组件未呈现在router-view中，如果我单击指向Service组件的路由器链接，它将正常呈现内容，而当我单击到Home路径时，它将呈现Home组件内容，那么为什么会发生这种情况？这是我的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。

编辑：

根据要求，在App.vue中，日志为/myproject/public_html/

Answer 1

我以前从未使用过Laravel，但我认为您正在寻找base。

Vue文档：

类型：字符串

默认值：“ /”

应用程序的基本URL。例如，如果整个单页应用程序在/ app /下提供，则base应使用值“ / app /”。

由于您在public static function regenerateEntireNtree() { $id = Context::getContext()->shop->id; $id_shop = $id ? $id: Configuration::get('PS_SHOP_DEFAULT'); $categories = Db::getInstance()->executeS(' SELECT c.`id_category`, c.`id_parent` FROM `'._DB_PREFIX_.'category` c LEFT JOIN `'._DB_PREFIX_.'category_shop` cs ON (c.`id_category` = cs.`id_category` AND cs.`id_shop` = '.(int)$id_shop.') ORDER BY c.`id_parent`, cs.`position` ASC'); $categories_array = array(); foreach ($categories as $category) $categories_array[$category['id_parent']]['subcategories'][] = $category['id_category']; $n = 1; if (isset($categories_array[0]) && $categories_array[0]['subcategories']) Category::_subTree($categories_array, $categories_array[0]['subcategories'][0], $n); } protected static function _subTree(&$categories, $id_category, &$n) { $left = $n++; if (isset($categories[(int)$id_category]['subcategories'])) foreach ($categories[(int)$id_category]['subcategories'] as $id_subcategory) Category::_subTree($categories, (int)$id_subcategory, $n); $right = (int)$n++; Db::getInstance()->execute(' UPDATE '._DB_PREFIX_.'category SET nleft = '.(int)$left.', nright = '.(int)$right.' WHERE id_category = '.(int)$id_category.' LIMIT 1'); }服务项目，因此vue看到的是public bool ReGenerateEntireTree() { System.Data.DataTable Table = SelectQuery("SELECT c.`id_category`, c.`id_parent` FROM `ps_category` c LEFT JOIN `ps_category_shop` cs " + "ON (c.`id_category` = cs.`id_category` AND cs.`id_shop` = 1) " + "ORDER BY c.`id_parent`, cs.`position` ASC"); Dictionary<int, int> categoryArray = new Dictionary<int, int>(); for (int i = 0; i < Table.Rows.Count; i++) { categoryArray.Add(Convert.ToInt32(Table.Rows[i]["id_category"]), Convert.ToInt32(Table.Rows[i]["id_parent"])); } int n = 1; SubTree(ref categoryArray, 1, ref n); return true; } private static void SubTree(ref Dictionary<int, int> categories, int id_category, ref int n) { int left; int right; left = n++; if (categories.ContainsValue(id_category)) { var keysWithMatchingValues = categories.Where(p => p.Value == id_category).Select(p => p.Key); foreach (var key in keysWithMatchingValues) { int id_subcategory = key; SubTree(ref categories, id_subcategory, ref n); } } right = n++; string SQL = "UPDATE ps_category SET nleft = '" + left + "', nright = '" + right + "' WHERE id_category = " + id_category + " LIMIT 1"; if (UpdateQuery(SQL) == 1) { //recalculateLevelDepth(id_category); } }而不是localhost/myproject/public_html/。

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

/myproject/public_html/

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

1 个答案: