Laravel-vuejs（Vue 路由器）Javascript 在 onchange url 中不起作用
Posted
技术标签:
【中文标题】Laravel-vuejs（Vue 路由器）Javascript 在 onchange url 中不起作用【英文标题】：Laravel-vuejs (Vue Router) Javascript not working in onchange url 【发布时间】：2021-04-25 09:54:35 【问题描述】：在我的项目中，当我使用<router-link> 从一个页面移动到另一个页面时，javascript 不起作用，请查看图像以了解我的意思。
第一次刷新页面时，一切正常，但是当我转到测试页面（从localhost:8000/ 到localhost:8000/test）时，javascript 不起作用，有人帮我吗？
我的app.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Vue App</title>
<link rel="stylesheet" type="text/css" href="mix('css/app.css')">
</head>
<body>
<div id="app">
<app></app>
</div>
<script src="mix('js/app.js')"></script>
<script src="mix('js/main.js')" async></script>
</body>
</html>
我的App.vue
<template>
<div class="root">
<Header/>
<router-view></router-view>
</div>
</template>
<script>
import Header from '@layout/Header';
export default
components:
Header
,
</script>
我的Header.vue
<template>
<header>
<router-link :to="name: 'home'"> Home </router-link>
<router-link :to="name: 'test'"> Teet </router-link>
</header>
</template>
我的app.js
require('./bootstrap');
import Vue from 'vue';
import VueRouter from 'vue-router';
import App from '@layout/App';
import routes from '@/routes';
Vue.use(VueRouter);
const router = new VueRouter(
mode: 'history',
routes
);
const app = new Vue(
el: '#app',
router,
// components: App
render : h => h(App)
);
我的routes.js
import Home from '@views/Home';
import Test from '@views/Test';
export const routes =
[
path: '/',
name: 'home',
component: Home
,
path: '/test',
name: 'test',
component: Test
,
]
我的webpack.mix.js
const mix = require('laravel-mix');
mix.webpackConfig(
resolve:
extensions: [ '.js', '.vue' ],
alias:
'@': path.resolve(__dirname, 'resources/js/'),
'@layout': path.resolve(__dirname, 'resources/js/layout'),
'@views': path.resolve(__dirname, 'resources/js/views'),
'@assets': path.resolve(__dirname, 'resources/assets/')
);
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
mix.copy('resources/assets/js/main.js', 'public/js/main.js');
如果你能帮助我，我会很高兴。谢谢。
【问题讨论】：
【参考方案1】：嗯，我明白你想要什么。您想在所有组件中调用 JavaScript 文件。例如，对于诸如 select2、datapicker 等 JavaScript 插件的 init.js 必须在所有组件中调用，我没听错吗？
无论如何
#1 在路径resources/js/中创建一个文件external.js
external.js
function add_script(src)
if(document.querySelector("script[src='" + src + "']")) return;
let script = document.createElement('script');
script.setAttribute('src', src);
script.setAttribute('type', 'text/javascript');
document.body.appendChild(script)
function rem_script(src)
let el = document.querySelector("script[src='" + src + "']");
if(el) el.remove();
在你的app.js 添加
import add_script, rem_script from './external';
router.beforeEach((to, from, next) =>
/* It would be nice to add a pre-loader here d
so that the page design is not affecte
*/
// Track your console :)
console.log('Hi before load');
// Add your script
add_script('path/to/your_js');
next()
)
router.afterEach(() =>
// Here you can remove loader after loaded
// Track your console :)
console.log('Hi After load');
// remove_included_js file but still working :)
rem_script('path/to/your_js');
)
现在应该在每个组件中调用这个文件path/to/your_js。
完成，就是这样:)
但在大型项目中，我从不这样建议你 :) 但正如 @equi 和 @Stefano A. 所说，他们是对的。
【讨论】：
【参考方案2】：router-link 允许JS 在启用路由器的Vue.js 应用程序中导航。这允许通过减少加载新页面所需的时间来优化用户体验。具体来说，新页面是异步注入到 DOM 中的。
为了达到您想要的结果，我们可以将我们希望在页面加载时运行的功能放在组件的 mounted() 方法中：
//component Test
<template>
<div>
<span> Test Page </span>
</div>
</template>
<script>
export default
data()
return
,
mounted()
alert('Page loaded!'); // JS functionality to be run on component mount
</script>
如果需要，我们可以在mounted() 方法中加载外部.js 文件：
mounted()
let newScript = document.createElement('script')
newScript.setAttribute('src', 'https://<URL>/script.js')
document.head.appendChild(newScript)
【讨论】：
是的，但我想在所有 vue 页面（组件）中加载/包含这个 main.js 我应该在每个页面中编写相同的代码吗？这对我来说不合逻辑，为什么我不包含在 app.js 或 index.blade.php 中。但我不知道为什么不工作或解决方案是什么，就像你在项目中包含 js 库时一样，但正如我所说，我是 vuejs 的新手，不知道我如何解决这个问题。请帮帮我。 这是我的主题结构 i.ibb.co/Pg1wRV3/Capture.png 我想在 laravel-vuejs 项目中包含 main.js【参考方案3】：我看不出它坏了。如果您考虑丢失警报消息：您可能将其作为 created() 或 mount() 生命周期钩子的一部分放在 App.vue 组件中。它只显示一次，因为 App.vue 组件保持加载状态，并且您正在使用路由器在 Test.vue 和 Home.vue 之间切换。 App.vue 在刷新之前不会遍历其生命周期钩子。
但是，如果您想在每次路由更改时执行部分代码，您应该在 vue 路由器上使用导航守卫。
【讨论】：
我想为我的主题包含我的项目 js 文件，并且 main.js 应该包含我的 javascript 代码，因为这个原因应该包含在所有页面中。就像您将主题与 laravel-vuejs 集成一样。有什么帮助吗？ 这是我的主题结构 i.ibb.co/Pg1wRV3/Capture.png 我想在 laravel-vuejs 项目中包含 main.js 您可以将其导入 app.js 文件中，例如：import '../project/js/main.js。你需要得到正确的路径以上是关于Laravel-vuejs（Vue 路由器）Javascript 在 onchange url 中不起作用的主要内容，如果未能解决你的问题，请参考以下文章