[英]Vue is always redirecting to home page after F5 refresh or when I enter url manually
I have built an app for a fantasy soccer game and uploaded it on an FTP.我为梦幻足球游戏构建了一个应用程序并将其上传到 FTP。 When I go to a route that is not home ('/cup' for example) and hit F5, the app redirects me to the home page ('/') always.
当我前往不在家的路线(例如“/cup”)并按 F5 时,应用程序始终将我重定向到主页(“/”)。 The same happens when I enter the url manually (mysite.com/cup), it takes me to the home page.
当我手动输入 url (mysite.com/cup) 时也会发生同样的情况,它会将我带到主页。
Here is my router:这是我的路由器:
import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../components/Home/Home.vue";
const Login = () => import("../components/Login/Login");
const Register = () => import("../components/Register/Register");
const UserPage = () => import("../components/UserPage/UserPage");
const Cup = () => import("../components/Cup/Cup");
const H2H = () => import("../components/H2H/H2H");
const Transfers = () => import("../components/Transfers/Transfers");
const RulesAndPrizes = () => import("../components/Rules/Rules");
const GetAllPlayers = () => import("../components/GetAllPlayers");
const tactics = () => import("../components/tactics");
const AllPlayersTable = () => import("../components/AllPlayersTable");
const AdminPanel = () => import("../components/AdminPanel/AdminPanel");
const NotFound = () => import("../components/common/NotFound");
import * as firebase from "firebase/app";
import "firebase/auth";
import getAllUsers from '../utils/getAllUsers'
Vue.use(VueRouter);
const routes = [{
path: "/",
name: "Home",
component: Home,
meta: { title: 'FFL: Home' },
beforeEnter(to, from, next) {
document.title = to.meta.title
next()
}
},
{
path: '/login',
name: 'login',
component: Login,
props: true,
meta: { title: 'FFL: Login' },
beforeEnter(to, from, next) {
firebase.auth().onAuthStateChanged(user => {
if (user) {
next('/')
} else {
document.title = to.meta.title
next()
}
});
}
},
{
path: '/register',
name: 'register',
component: Register,
props: true,
meta: { title: 'FFL: Register' },
beforeEnter(to, from, next) {
firebase.auth().onAuthStateChanged(user => {
if (user) {
next('/')
} else {
document.title = to.meta.title
next()
}
});
}
},
{
path: '/team-details/:id',
component: UserPage,
props: true,
name: "UserPage",
beforeEnter(to, from, next) {
document.title = 'My Team'
next()
}
},
{
path: '/transfers/:id',
component: () =>
import(/* webpackChunkName: "user-transfers" */ "../components/UserPage/UserTransfers/UserTransfers"),
name: 'mytransfers',
props: true,
meta: { title: 'FFL: Transfers Center ' },
beforeEnter(to, from, next) {
firebase.auth().onAuthStateChanged(async user => {
if (user) {
const teamName = to.params.id
const users = await getAllUsers()
const teamId = Object.values(users).filter(u => {
return u.userLogo === teamName
})[0].uid
if (teamId === user.uid) {
document.title = to.meta.title + users[teamId].userTeam
next()
} else {
next('/')
}
} else {
next('/')
}
});
}
},
{
path: '/getallplayers',
name: 'getallplayers',
component: GetAllPlayers
},
{
path: '/tactics',
name: 'tactics',
component: tactics
},
{
path: '/allplayers',
name: 'allplayers',
component: AllPlayersTable
},
{
path: '/admin',
name: 'admin',
meta: { title: 'FFL: Admin Panel' },
component: AdminPanel,
beforeEnter(to, from, next) {
document.title = to.meta.title
next()
}
},
{
path: '/cup',
name: 'cup',
props: true,
component: Cup,
meta: { title: 'FFL: Cup' },
beforeEnter(to, from, next) {
document.title = to.meta.title
next()
}
},
{
path: '/h2h',
name: 'h2h',
props: true,
component: H2H,
meta: { title: 'FFL: H2H League' },
beforeEnter(to, from, next) {
document.title = to.meta.title
next()
}
},
{
path: '/transfers',
name: 'transfers',
props: true,
component: Transfers,
meta: { title: 'FFL: Transfers' },
beforeEnter(to, from, next) {
document.title = to.meta.title
next()
}
},
{
path: '/rules-prizes',
name: 'rules-prizes',
props: true,
component: RulesAndPrizes,
meta: { title: 'FFL: Rules and prizes' },
beforeEnter(to, from, next) {
document.title = to.meta.title
next()
}
},
{
path: '*',
name: 'not-found',
meta: { title: 'FFL: Page not found' },
component: NotFound,
beforeEnter(to, from, next) {
document.title = to.meta.title
next()
}
}
];
const router = new VueRouter({
mode: "history",
base: process.env.BASE_URL,
routes
});
export default router;
Thank you in advance for the help!预先感谢您的帮助!
Edit: Here is my .htaccess file编辑:这是我的 .htaccess 文件
ErrorDocument 404 http://ff-legends.com/
Check that your .htaccess
file is correct.检查您的
.htaccess
文件是否正确。 Copy and paste this recommended setup from the Vue router docs :从 Vue 路由器文档中复制并粘贴此推荐设置:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.