如题,我用的是 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...
1
v1024 2017-02-09 15:04:40 +08:00
这跟 Webpack 无关
变量的作用域没你想的那么大 模块无法访问父级作用域 除非你放在 window 对象上 |
2
echol 2017-02-09 15:06:59 +08:00
|
3
gzlock 2017-02-09 15:07:51 +08:00 via Android 1
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 |