Vuejs Router,有条件加载JavaScript代码

Question

我正在将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时,我希望没有类似于传统路由的工作方式的副作用,因为它将获得新代码并再次呈现页面.

Answer 1

$router您可以使用通过vue.js访问的路径变量。打开 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
    }
  ]
})