VueRouter 在历史模式下无法正常工作 - Wordpress答案

【问题标题】：VueRouter doesn't work properly in history mode - WordpressVueRouter 在历史模式下无法正常工作 - Wordpress
【发布时间】：2018-10-30 22:56:00
【问题描述】：

我使用 Vue 项目作为 Wordpress 主题。我创建了一个简单的路由器，但是当我启用mode: 'history' 时，我收到了空白站点。我尝试配置.htaccess 文件但没有任何效果。我的项目位于 XAMPP htdocs 目录中的 VueWP 目录中。使用哈希一切正常。错误在哪里？

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /VueWP/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /VueWP/index.php [L]
</IfModule>
# END WordPress

这是我的 VueRouter：

import Vue from 'vue';
import Router from 'vue-router';
import Main from '../Components/Main';
import ArticlePage from '../Components/ArticlePage';
import Page from '../Components/Page';

Vue.use(Router);

export default new Router({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'Main',
            component: Main
        },
        {
            path: '/post/:url',
            name: 'ArticlePage',
            component: ArticlePage
        },
        {
            path: '/page/:url',
            name: 'Page',
            component: Page
        }
    ],

});

【问题讨论】：

标签： javascript wordpress .htaccess vue.js vue-router

【解决方案1】：

在你的路由文件中定义publicPath: '/'。希望它有效。

import Vue from 'vue';
import Router from 'vue-router';
import Main from '../Components/Main';
import ArticlePage from '../Components/ArticlePage';
import Page from '../Components/Page';

Vue.use(Router);

export default new Router({
    mode: 'history',
    routes: [
        {
            path: '/',
            publicPath: '/',
            name: 'Main',
            component: Main
        },
        {
            path: '/post/:url',
            publicPath: '/',
            name: 'ArticlePage',
            component: ArticlePage
        },
        {
            path: '/page/:url',
            publicPath: '/',
            name: 'Page',
            component: Page
        }
    ],

});

【讨论】：