javascript - vue-router Uncaught ReferenceError: router is not defined - Stack Overflow

admin管理员组

文章数量:1391937

I'm reviewing Vue and it's router ponent, although I'm having some issues getting the router ponent to work. Error in console below:

Uncaught ReferenceError: router is not defined

Hi all,

I'm importing the Vue and VueRouter into an index.html and trying my best to read the documentation to get the router initialized, but cannot seem to it working.

In index.html:

<script type="module" src="/assets/js/main.js"></script>
<script src=".js"></script>
<script src=".js"></script>

In main.js:

import VueRouter from 'vue-router'

Vue.use(VueRouter)

var router = new VueRouter({
  routes: [
    { path: 'home', ponent: home } 
  ]
});

var app = new Vue({
  router,
  el: '#app',
  data: {
    ...etc

Help would be appreciated...

Many thanks.

I'm reviewing Vue and it's router ponent, although I'm having some issues getting the router ponent to work. Error in console below:

Uncaught ReferenceError: router is not defined

Hi all,

I'm importing the Vue and VueRouter into an index.html and trying my best to read the documentation to get the router initialized, but cannot seem to it working.

In index.html:

<script type="module" src="/assets/js/main.js"></script>
<script src="https://cdn.jsdelivr/npm/vue/dist/vue.js"></script>
<script src="https://unpkg./vue-router/dist/vue-router.js"></script>

In main.js:

import VueRouter from 'vue-router'

Vue.use(VueRouter)

var router = new VueRouter({
  routes: [
    { path: 'home', ponent: home } 
  ]
});

var app = new Vue({
  router,
  el: '#app',
  data: {
    ...etc

Help would be appreciated...

Many thanks.

• javascript
• vue.js
• vue-router

Share Improve this question Follow edited Aug 10, 2019 at 8:59 Andrew Vasylchuk 4,77922 gold badges1313 silver badges3131 bronze badges asked Aug 9, 2019 at 16:45 stoneferrystoneferry 17711 gold badge22 silver badges1212 bronze badges 1

• If the second code sample is from main.js then I would suggest reordering your <script> tags to put main.js last. Otherwise, could you include the full stacktrace for the error? – skirtle Commented Aug 9, 2019 at 17:00

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

You can't use import VueRouter from 'vue-router' AND <script src="https://unpkg./vue-router/dist/vue-router.js"></script>

import means it's expecting it as an npm dependency which will be bundled in the main.js file when piled.

you need to run npm install -save vue-router or remove the import ... statement.

Seems like you do not have any building process, and you load Vue and Vue Router directly in browser.

To make everything work, you should follow next steps:

1. Change the order of scripts, so your main.js goes last. Because you need Vue and Vue Router already be loaded before you init your application.

<script src="https://cdn.jsdelivr/npm/vue/dist/vue.js"></script>
<script src="https://unpkg./vue-router/dist/vue-router.js"></script>
<script type="module" src="/assets/js/main.js"></script>

2. Remove import from your main.js as it runs directly in browser.

Vue.use(VueRouter)

var router = new VueRouter({
  routes: [
    { path: 'home', ponent: home } 
  ]
});

var app = new Vue({
  router,
  el: '#app',
  data: {
    ...etc 

本文标签： javascriptvuerouter Uncaught ReferenceError router is not definedStack Overflow