Vuejs Router，条件加载 JavaScript 代码答案

【问题标题】：Vuejs Router, conditional loading of JavaScript CodeVuejs Router，条件加载 JavaScript 代码
【发布时间】：2018-12-24 03:13:26
【问题描述】：

我正在将 Vue Router 集成到我的应用程序中。

在我的一个组件中，我正在使用一些我不想在另一条路线上加载或出现的 js 代码？

例子

compA.vue
<script>console.log('hello')</script>

app.com/a -> I should see console log Hello.

app.com/b -> when I access this I should not see hello in the console.

编辑：根据回复进行澄清。

我有两个组件，每个组件都有自己的生命周期钩子，所以我不需要设置逻辑来触发基于组件的函数...

如果用户访问 compA 并且函数触发并产生一些副作用，当我访问 compB 时，我希望没有类似于传统路由工作方式的副作用，因为它会获取新代码并呈现再次翻页。

【问题讨论】：

看了你的编辑后，我有点困惑。你到底在说什么副作用？你能提供一些例子吗？个人觉得你想多了。当使用 vue-router 从一个页面转到另一个页面时，您会加载组件，并且它是访问该页面时的逻辑。 Hello在控制台中仍然可见的原因是控制台没有得到刷新。
感谢@IlyasDeckers 的评论，但是想象一下，如果第一个组件向 DOM 添加一些内容或向窗口对象添加一些数据 - 它仍然存在，我的用例是我需要它消失。
你冷尝试将:key="$route.fullPath" 属性添加到<router-link> 这基本上告诉Vue 在浏览到使用相同组件的不同页面时重新呈现组件。或者，我前段时间读到了一个vm.$forceUpdate();方法，这基本上是强制Vue实例重新渲染，但不影响子组件。

标签： javascript vue.js vuejs2 vue-router

【解决方案1】：

您可以在路由配置中添加一些元数据：

const router = new VueRouter({
  routes: [
    {
      path: '/a',
      component: compA,
      meta: { doLog: true }
    },
    {
      path: '/b',
      component: compA,
      meta: { doLog: false }
    },
  ]
})

然后你可以在你的组件中使用this.$route.meta.doLog：

created() {
  if(this.$route.meta.doLog) {
     console.log('hello');
  }
}

【讨论】：

这不能回答问题，因为我有两个组件。

【解决方案2】：

您可以在 vue 中使用通过 $router 访问的路径变量。打开你的 vue devtools，点击你的组件，然后点击右侧的 $route。在这里你可以看到通过$route访问的所有变量

例子：

  mounted() {
    // console.log will only run on route '/a'
    if (this.$route.path === '/a') {
        console.log('Hello World)
    }
  }

如果$route 抛出错误。你需要在你的main.js中定义它

  import router from './router'

  new Vue({
    el: '#app',
    router,
    store,
    render: h => h(App)
  })

在router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/app/Login/Login'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Login',
      component: Login
    }
  ]
})

【讨论】：

这个不回答问题，我有两个组件，所以我可以将函数分别添加到它们中的onCreated中我不需要检查路径。