版本
vue:1.0.26-csp
vue-router:0.7.13
使用了 ES6 的语法。
使用了Webpack编译。
问题描述
使用火狐浏览器访问页面,Firebug提示如下错误:
Error: Please install the Router with Vue.use() before creating an instance.
throw new Error('Please install the Router with Vue.use() before ' + 'creating a...
下面是程序源代码文件 app.js 和 index.ejs。
app.js
'use strict';
import Vue from "vue";
import Router from "vue-router";
var Foo = Vue.extend({
template: '<p>This is foo!</p>'
})
var Bar = Vue.extend({
template: '<p>This is bar!</p>'
})
var App = Vue.extend({})
var router = new Router()
router.map({
'/foo': {
component: Foo
},
'/bar': {
component: Bar
}
})
router.start(App, '#app')
index.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<meta content="" name="description"/>
<meta content="" name="author"/>
</head>
<body>
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用指令 v-link 进行导航。 -->
<a v-link="{ path: '/foo' }">Go to Foo</a>
<a v-link="{ path: '/bar' }">Go to Bar</a>
</p>
<!-- 路由外链 -->
<router-view></router-view>
</div>
</body>
</html>
解决过程
利用 Firebug 插件的Debug能力,发现错误是在
var router = new Router()
这行代码抛出的。网上搜索了一下,没有找到什么解决方案。后来看了一下 vue-router 的源代码。我使用 npm install 的方式安装了 vue-router 的模块。在 node_modules/vue-router/src/index.js 文件里,读到下面这部分代码:
// late bind during install
let Vue
/**
* Router constructor
*
* @param {Object} [options]
*/
class Router {
constructor (
// 此处代码省略。
) {
/* istanbul ignore if */
if (!Router.installed) {
throw new Error(
'Please install the Router with Vue.use() before ' +
'creating an instance.'
)
}
} // end constructor
} // end class
这说明在 Router 类的构造方法里,对变量 Router.installed 进行判断,来确定 Router 类是否已经安装。报出那个错误应该是因为没有进行正常的安装。那么怎么样进行安装呢?我对变量 installed 进行了查找,找到了如下代码:
/* Installation */
Router.installed = false
/**
* Installation interface.
* Install the necessary directives.
*/
Router.install = function (externalVue) {
/* istanbul ignore if */
if (Router.installed) {
warn('already installed.')
return
}
Vue = externalVue
applyOverride(Vue)
View(Vue)
Link(Vue)
util.Vue = Vue
Router.installed = true
}
// auto install
/* istanbul ignore if */
if (typeof window !== 'undefined' && window.Vue) {
window.Vue.use(Router)
}
export default Router
这段代码在 node_modules/vue-router/src/index.js 文件的最后部分,利用布尔型变量 Router.installed 来标记是否已经安装。共有两种安装方式,一种是手动安装,调用Router.install 函数;另外一种自动安装,使用了window.Vue这个变量。因此一共有两种解决办法:
第1种办法,手动安装。在new Router() 前面加上如下代码:
Router.install(Vue);
第2种办法,自动安装。仅限于使用了Webpack的情况下,在 Webpack 的配置文件中,加上如下代码:
plugins: [
// 其他的代码都被忽略。
new webpack.ProvidePlugin({
'window.Vue': 'vue'
}),
]