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

您可以在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
    }
  ]
})

Answer 2

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

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');
  }
}

Vuejs路由器，JavaScript代码的有条件加载

2 个答案: