除非刷新页面,否则Laravel + Vue脚本将无法工作

 收藏

我正在使用具有多个脚本的HTML模板。我将这些脚本放置在初始刀片模板中,但是当我在组件之间切换时,这些脚本没有被调用,我必须刷新整个页面才能使其正常工作。

我试过将脚本添加到vue组件中,但这也不起作用。有人可以帮忙吗?

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{csrf_token()}}">

    <title>Test App</title>

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700&display=swap" rel="stylesheet"
          type="text/css">
    <link rel="stylesheet" href="{{asset('frontend/css/font/flaticon.css')}}">


    {{--THEME FONTS--}}


    {{--THEME STYLES--}}
    <link rel="stylesheet" href="{{asset('css/app.css')}}">

    {{--FRONTEND STYLES--}}


    <link rel="stylesheet" href="{{asset('frontend/css/bootstrap.min.css')}}">
    <link rel="stylesheet" href="{{asset('frontend/css/font-awesome.css')}}">
    <link rel="stylesheet" href="{{asset('frontend/css/swiper.min.css')}}">
    <link rel="stylesheet" href="{{asset('frontend/css/ion.rangeSlider.min.css')}}">
    <link rel="stylesheet" href="{{asset('frontend/css/magnific-popup.css')}}">
    <link rel="stylesheet" href="{{asset('frontend/css/nice-select.css')}}">
    <link rel="stylesheet" href="{{asset('frontend/css/style.css')}}">
    <link rel="stylesheet" href="{{asset('frontend/css/responsive.css')}}">
    {{--END OF FRONTEND STYLES--}}


    {{--DASHBOARD STYLES--}}


    {{--END OF DASHBOARD STYLES--}}


</head>
<body>


<div id="app">
    <base-root></base-root>
</div>


{{--JS--}}

<script src="{{asset('js/app.js')}}" defer ></script>


{{--FRONtEND JS--}}
<script src="{{asset('frontend/js/jquery.min.js')}}" defer></script>
<script src="{{asset('frontend/js/popper.min.js')}}" defer></script>
{{--<script src="{{asset('frontend/js/bootstrap.min.js')}}" defer></script>--}}
<script src="{{asset('frontend/js/ion.rangeSlider.min.js')}}" defer></script>
<script type="text/javascript" src="{{asset('frontend/js/swiper.min.js')}}" ></script>
<script src="{{asset('frontend/js/jquery.nice-select.min.js')}}" defer></script>
<script src="{{asset('frontend/js/jquery.magnific-popup.min.js')}}" defer></script>
<script src="{{asset('frontend/js/sticksy.js')}}" defer></script>
<script src="{{asset('frontend/js/munchbox.js')}}" defer></script>




<!-- Maps -->
{{--<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDnd9JwZvXty-1gHZihMoFhJtCXmHfeRQg"></script>--}}
{{--END OF FRONTEND JS--}}

{{--DASHBOARD JS--}}

{{--END OF DASHBOARD JS--}}


</body>
</html>
回复