Whenever I try to redirect from the target component to the target-details component using a specific ID, I encounter an error when refreshing the page:
javascript Uncaught SyntaxError: Unexpected token '<' app.js:1index.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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fa948a88959d889f8989bacad4c8d4ca">[email protected]</a>/nprogress.css" rel="stylesheet" />
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e08e90928f8792859393a0d0ced2ced0">[email protected]</a>/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>
router.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"
}
},