【037】使用vue-router时，Error: Please install the Router with Vue.use() before creating an instance.的解决办法

zhangchao19890805

已于 2022-05-08 16:43:50 修改

阅读量2.6k

点赞数 1

于 2016-08-12 15:17:07 首次发布

本文链接：https://blog.csdn.net/zhangchao19890805/article/details/52191092

版权

vue 同时被 3 个专栏收录

8 篇文章 0 订阅

订阅专栏

Webpack

6 篇文章 0 订阅

订阅专栏

vue-router

5 篇文章 0 订阅

订阅专栏

版本

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'
    }),
]

zhangchao19890805

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【037】使用vue-router时，Error: Please install the Router with Vue.use() before creating an instance.的解决办法

版本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
复制链接

扫一扫