javascript - vue-router 为什么当我刷新一个包含 id 的 URL 的页面时,我失去了页面的所有设计
问题描述
我是使用特定 ID 从目标组件重定向到目标详细信息组件,所以我的问题是当我刷新页面时出现错误javascript Uncaught SyntaxError: Unexpected token '<' app.js:1
。在点击浏览器的后退按钮或重定向到另一个页面后,一个设计又回来了,我不知道发生了什么,我所有的其他页面都正常工作。
索引.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>
目标.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>
目标细节.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"
}
},
解决方案
对所有 JavaScript 和样式表使用绝对路径。
前任。<script type="text/javascript" src="/build/js/app.js"></script>
您的链接标签中还有额外的}}
字符。now-ui-dashboard.css
推荐阅读
- javascript - 使用 Rollup 将来自 CDN 的导入包含到捆绑包中
- google-apps-script - 有没有办法获取表单响应并将它们放在另一张纸的特定单元格中
- python - 如何使用python和线性编程获得除目标值以外的所有组合
- r - 尝试使用 ggplot 和方程标签绘制不同的线性回归模型
- arrays - 需要帮助 Post data 在数组 django rest 框架中获取数据
- linux - 获取 curl:(3)使用错误/非法格式的 URL
- reactjs - React Draft Wysiwyg - 使用自定义工具栏图标而不是标准的内联工具栏图像
- python - 如果用户输入匹配多个字典然后显示值
- powerbi - 与去年同期相比,运行月总百分比变化的功率 bi
- spring-boot - JPA 查询:当 Hibernate 运行时 EclipseLink 不工作