版本

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

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue