Question

我的项目使用Vue2和Vue Router。我希望能够通过输入网址Stats来加载组件http://example.com/stats。

网址http://example.com/stats不起作用，我被重定向到/并加载App组件
<router-link :to="/stats">Go to stats</router-link>完美无缺

我想知道它是Vue Router问题还是服务器配置问题。我想提一下，我使用localhost在nGinx和我的服务器中遇到此问题。

我该如何解决这个问题？

app.js：

const routes = [
  { path: '/', component: App },
  { path: '/stats', component: Stats },
  { path: "*", component: PageNotFound },
  { path: '/admin', meta: { requiresAdmin: true }, component: Admin},
  { path: "/not-authorized", component: NotAuthorized },
];

Vue.use(VueRouter);

const router = new VueRouter({
  mode: 'history',
  routes,
})

const app = new Vue({
  el: '#app',
  router,
  data () {
    return {}
  },
});

router.beforeEach((to, from, next) => {
    if (to.matched.some(record => record.meta.requiresAdmin)) {
        if (!Store.state.isAdmin) {
            axios.post('/isAdmin').then((response) => {
                if(response.data.isAdmin){
                    next();
                }
                else {
                    next({
                        path: '/not-authorized',
                    })
                }
            });
        }
        else {
            next();
        }
    }
        else {
            next();
        }
    }
    else {
        next(); // make sure to always call next()!
    }
});

Answer 1

您是否已将Web服务器配置为返回同一页面而不管URL？这样您的应用就可以加载，并保留URL，以便路由可以接管并在加载后选择正确的组件。

这个答案https://stackoverflow.com/a/7027686/7816087建议使用以下nginx配置：

location / {
    try_files $uri /base.html;
}

Answer 2

转到Laravel路线，然后输入：

Route::any('{all}', function () {
    return view('index'); // if your main view is "index"
})

这将确保深层链接在Laravel处理的所有请求上正常工作。

Answer 3

这就是我做的事情

Route::get('/stats', 'HomeController@home');

Vue Router：当路由器链接执行时，URL无法加载正确的组件

app.js：

3 个答案: