在 webpack 下 main.js 中定义的变量为什么在组件中访问不到?

2017-02-09 14:54:46 +08:00
 matts8023

如题,我用的是 vue2.0 + vue-router2.0 + vue-loader + webpack ,在 main.js 中定义了 router 变量,但是在的 vue 文件中访问 router 变量却提示没有定义,难道 webpack 下每个 js 文件中的变量都是限定在特定文件内的嘛?

main.js 片段如下:

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './views/app.vue'

Vue.use(VueRouter)
const router = new VueRouter({
    routes: [{
        name: 'index',
        path: '/',
        component: require('./views/index.vue')
    }]
})

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

app.vue 片段如下:

<template>
  <router-view></router-view>
</template>

index.vue 片段如下

<template>
  <div id="page-index"></div>
</template>

<script>
export default {
    data() {},

   mounted() {
     alert(router)
   }
}
</script>

访问 "/" 路由时提示 router 未定义,这是为什么?昨天刚学 webpack ,看到一脸懵逼 T.T...

3983 次点击
所在节点    前端开发
5 条回复
v1024
2017-02-09 15:04:40 +08:00
这跟 Webpack 无关
变量的作用域没你想的那么大
模块无法访问父级作用域
除非你放在 window 对象上
echol
2017-02-09 15:06:59 +08:00
gzlock
2017-02-09 15:07:51 +08:00
1 用了 router ,就不需要 render ( app ),参考:
http://router.vuejs.org/zh-cn/essentials/getting-started.html

2 组件内(你的 index.vue )使用 this.$router 访问 router 对象,参考:
http://router.vuejs.org/zh-cn/api/route-object.html
matts8023
2017-02-09 15:08:15 +08:00
@v1024 已经尝试把他放到 windows 对象上了,但是在 vue 内访问依旧未定义。
matts8023
2017-02-09 15:11:41 +08:00
@echol 嗯,可以用,谢谢!

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/339304

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX