vue -router, почему, когда я обновляю sh страницу с URL, содержащим идентификатор, я теряю весь дизайн страницы - PullRequest
Новая
       12

vue -router, почему, когда я обновляю sh страницу с URL, содержащим идентификатор, я теряю весь дизайн страницы

0 голосов
/ 09 января 2020

Я перенаправлен с целевого компонента на целевой компонент с использованием специфицированного c id, поэтому моя проблема заключается в том, что при обновлении sh страницы появляется ошибка 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>

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"
            }
    },

1 Ответ

2 голосов
/ 09 января 2020

Используйте абсолютный путь для всех ваших JavaScript и таблиц стилей.

Пример. <script type="text/javascript" src="/build/js/app.js"></script>

В вашем теге now-ui-dashboard.css также есть дополнительные }} символов.

...