Vue-Router：刷新后带有参数的页面为空白
Posted
技术标签:
【中文标题】Vue-Router：刷新后带有参数的页面为空白【英文标题】：Vue-Router: page with params is blank after refreshing 【发布时间】：2021-02-18 13:29:36 【问题描述】：在初始页面上，我得到 2 个 ID 变量：organizationId 和 brandId，我想将它们作为参数保存在我的 URL 中，同时路由到组织概览页面。
export const router = new Router(
mode: 'history',
routes: [
...
path: 'organization/:organizationId/brand/:brandId/overview',
name: 'OrganizationOverviewPage',
component: OrganizationOverviewPage,
,
...
]
);
<router-link :to=" name: 'OrganizationOverviewPage',
params: organizationId: owner.id, brandId: brand.id ">
BUTTON
</router-link>
它工作正常，在新页面上我可以在 URL 和 Vue DevTools 中看到这两个变量：
问题是当我刷新页面时，我得到了一个空白屏幕。
有趣的是，当我在路由器路径中仅包含“organizationId”变量时，它可以正常工作。
path: 'organization/:organizationId/overview',
name: 'OrganizationOverviewPage',
component: OrganizationOverviewPage,
,
这也是它之前的样子，但由于第二个变量 -brandId 的需要，我不得不添加它 - 现在它不起作用。 URL 似乎到达了路由，因为只有当我破坏它时，我才得到 404。这可能与生成的组件有关吗？ 我不知道如何找到解决方案，我什至没有从终端或浏览器控制台收到任何错误。
更新-OrganizationOverviewPage：
<template>
<div>
<v-row no-gutters class="mb-3">
<v-col cols="12">
<v-card flat>
<v-card-title>
<h5 class="float-left m-0">
<router-link
:to=" name: 'OrganizationOverviewPage'"
class="main-options-router-link"
>
<span class="font-weight-bold text-dark">Overview</span>
</router-link>
<span class="px-1">|</span>
<router-link
class="main-options-router-link"
:to=" name:'OrganizationArtists'"
>Artists</router-link>
<span class="px-1">|</span>
<router-link class="main-options-router-link" :to=" name: 'OrganizationBrands'">Brands</router-link>
<span class="px-1">|</span>
<router-link class="main-options-router-link" :to=" name: 'OrganizationTeam'">Team</router-link>
<span class="px-1">|</span>
<router-link
class="main-options-router-link"
:to=" name: 'OrganizationTemplates'"
>Templates</router-link>
</h5>
</v-card-title>
</v-card>
</v-col>
</v-row>
<v-row>
<v-col md="6">
<OrganizationProfileWidget></OrganizationProfileWidget>
</v-col>
<v-col md="6">
<OrganizationMetricsWidget v-bind:organizationId="organizationId"></OrganizationMetricsWidget>
</v-col>
</v-row>
<v-row no-gutters class="mt-3">
<v-col cols="12">
<Widget
title="<h4><span class='font-weight-bold'>Active Campaigns</span></h4>"
customHeader
settings
:name="`Organization Overview`"
>
<div slot="body">
<v-row>
<v-col class="mt-4 mb-2">
<v-text-field
outlined
v-model="search"
dense
placeholder="Search user by Name"
hide-details
></v-text-field>
</v-col>
</v-row>
<v-data-table
:headers="headers"
:items="list"
item-key="id"
:search="search"
class="elevation-1 list-data-table"
:loading="inProgress"
hide-default-footer
:page.sync="page"
:items-per-page="itemsPerPage"
@page-count="pageCount = $event"
>
<template v-slot:item.artistName=" item ">
<router-link
:to=" name:'ArtistOpsPage',params: organizationId: organizationId,artistId:item.artistId "
>item.artistName</router-link>
</template>
<template v-slot:item.title=" item ">
<router-link
:to=" name:'ArtistOpsPage',params: organizationId: organizationId,artistId:item.artistId "
>item.title</router-link>
</template>
<template v-slot:item.startDt=" item ">item.startDt | DayMonthYear</template>
<template v-slot:item.endDt=" item ">item.endDt | DayMonthYear</template>
<template v-slot:footer>
<v-divider></v-divider>
<v-row align="center">
<v-col cols="2" class="px-4">
<v-select
:value="itemsPerPage"
:items="perPageRecordsOptions"
label="Items per page"
@change="itemsPerPage = parseInt($event, 10)"
></v-select>
</v-col>
<v-spacer></v-spacer>
<v-col cols="8" class="px-4">
<v-pagination v-model="page" :length="pageCount"></v-pagination>
</v-col>
<v-spacer></v-spacer>
</v-row>
</template>
</v-data-table>
</div>
</Widget>
</v-col>
</v-row>
</div>
</template>
<script>
import Widget from "@/components/venus/Widget";
import createHelpers from "vuex-map-fields";
import OrganizationProfileWidget from "@/components/venuspro/agent/suitcase/OrganizationProfileWidget";
import OrganizationMetricsWidget from "@/components/venuspro/agent/suitcase/OrganizationMetricsWidget";
const mapFields = createHelpers(
getterType: "organizationOne/getField",
mutationType: "organizationOne/updateField"
);
export default
name: "OrganizationOverviewPage",
components:
OrganizationProfileWidget,
OrganizationMetricsWidget,
Widget
,
computed:
organizationId: function()
return this.$route.params.organizationId;
,
brandId: function()
return this.$route.params.brandId;
,
list: function()
return this.$store.state.campaignList.allList;
,
organizationOne: function()
return this.$store.state.organizationOne.one;
,
...mapFields(["one", "inProgress"])
,
data()
return
search:"",
page: 1,
itemsPerPage: 10,
perPageRecordsOptions: [5, 10, 50, 100, 500],
headers: [
text: "Artist",
align: "center",
sortable: false,
value: "artistName"
,
text: "Title",
align: "center",
sortable: true,
filterable: true,
value: "title"
,
text: "Start Date",
align: "center",
sortable: true,
filterable: true,
value: "startDt"
,
text: "End Date",
align: "center",
sortable: true,
filterable: true,
value: "endDt"
]
;
,
created()
if (this.organizationOne.id !== this.organizationId)
this.$store.dispatch("organizationOne/fetchOne", this.organizationId);
this.$store.dispatch(
"campaignList/fetchAllCampaignList",
this.organizationId
);
,
methods:
;
</script>
【问题讨论】：
显示OrganizationOverviewPage
亲爱的@Anatoly，我会在我的问题帖子中更新它
刷新失败的 URL 究竟是什么？您是通过 Webpack 开发服务器（即 npm run serve）还是其他方式运行应用程序？
【参考方案1】：
有人在这个问题下给出了提示，但随后删除了他的答案。无论如何，谢谢你，这是一个解决方案！
在我的vue.config.js 中，我需要修复的是我的devServer 对象中的配置。
module.exports =
...
devServer:
...
historyApiFallback:
rewrites: [
...
// from: /\/brand/, to: '/brand.html' ,
]
,
我已经注释掉了brand重写的行，现在它正在工作！
【讨论】：
以上是关于Vue-Router：刷新后带有参数的页面为空白的主要内容，如果未能解决你的问题，请参考以下文章