vue-router 为什么当我刷新一个包含 id 的 URL 的页面时，我失去了页面的所有设计答案

【问题标题】：vue-router why when I refresh a page that has a URL contains id, I lose all design of pagevue-router 为什么当我刷新一个包含 id 的 URL 的页面时，我失去了页面的所有设计
【发布时间】：2020-04-26 12:53:47
【问题描述】：

我是使用特定 ID 从目标组件重定向到目标详细信息组件，所以我的问题是当我刷新页面时收到错误 javascript Uncaught SyntaxError: Unexpected token '<' app.js:1。点击浏览器的后退按钮或重定向到另一个页面后，设计又回来了我不知道发生了什么，我的所有其他页面都正常工作。

index.html

<head>
    <meta name="author" content="Nile-Theme">
    <meta name="robots" content="index follow">
    <meta name="googlebot" content="index follow">
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- google fonts -->
    <link href="https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700|Tajawal:400,500,600,700&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="./build/css/flaticon.css">
    <link rel="stylesheet" href="./build/css/all.css">
    <link rel="stylesheet" href="./build/css/app.css">
    <link rel="stylesheet" href="./build/css/style.css">

    <!-- main dashboard -->
    <link rel="stylesheet" href="./build/css/now-ui-dashboard.css') }}">

    <!-- Nprogress -->
    <link href="https://unpkg.com/nprogress@0.2.0/nprogress.css" rel="stylesheet" />

    <script src="https://unpkg.com/nprogress@0.2.0/nprogress.js"></script>



</head>

<body >
    <noscript>
      <strong>We're sorry but full-hunt doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->

    <!-- js file -->
    <script type="text/JavaScript" src="./build/js/app.js"></script>

</body>

target.js

<template>
   <div class="page-output">
        <div class="container">

           <h1>Target page</h1>
 <li class="clearfix" v-for="domain in domains" :key="domain.domain_id">{{ domain.domain }} 
                            <router-link class="more" 
                                :to="{ 
                                        name: 'target-details', 
                                        params: { 
                                            id: domain.domain_id 
                                        } 
                                    }" >Target details <i class="fa fa-angle-right"></i>
                            </router-link>
                        </li>
        </div>
    </div>
</template>

target-details.js

<template>
    <div>
        <div class="page-output">
            <div class="container">
              <div class="target-title">
                    <router-link class="right" to="/targets"><i class="fa fa-angle-left"></i> {{ geNameDomainById(id) }} domain</router-link>
                    <a href="#" class="left"><i class="fa fa-cog"></i> Domain settings</a>
                </div>
           </div> 
        </div>
</template>

路由器.js

 {
        path: '/targets',
        name: 'target',
        component: () =>
            import ( /* webpackChunkName: "target" */ '@/views/admin/Target.vue'),
            meta: {
                middleware: [
                    auth
                ],
                title: "Targets"
            },
    },
    {
        path: '/targets/:id/details',
        name: 'target-details',
        component: () =>
            import ( /* webpackChunkName: "target" */ '@/views/admin/TargetDetails.vue'),
            meta: {
                middleware: [
                    auth
                ],
                title: "TargetDetails"
            }
    },

【问题讨论】：

刷新时，您的浏览器正在尝试加载./build/js/app.js - 这是相对于地址中的路径...例如当地址为//host/targets 时，浏览器正在加载//host/targets/./build/js/app.js ... 而当地址为//host/targets/111/details 时，浏览器会尝试加载//host/targets/111/details/./build/js/app.js - 这当然不存在。于是服务器发送了一个错误页面，其第一个字符可能是<
@Jaromanda X 那么在这种情况下我该怎么办
对不起，我不知道——我从来没有在我做过的任何 vue 应用程序中添加像这样的任意 js 文件——也许将所有路径设置为 ./build/.... 绝对路径，比如改为/build/...
你能告诉我们你的样式 css 文件吗？ @Omda
@Jenuel thismy style.css

标签： javascript vue.js single-page-application vuex vue-router

【解决方案1】：

对所有 JavaScript 和样式表使用绝对路径。

例如。 <script type="text/javascript" src="/build/js/app.js"></script>

您的now-ui-dashboard.css 链接标签中还有额外的}} 字符。

【讨论】：

感谢您的回复，是的，我已解决您所说的问题，但还没有发生任何事情
在我查看我的标题标签之后，它的工作然后我删除了每个文件./build/app.js to /build/app.js 的路径开头的点，如你所说，然后它的工作。非常感谢