Question

我在尝试实施vue-router时遇到以下错误。

Unknown custom element: <router-view> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

我需要在哪里提供名称选项？

我所看到的很多教程似乎都是vue-router的旧版本。我按照设置过程但无法使其正常工作。

使用webpack cli模板时，我可能需要做些什么特别的事情吗？

我也使用vue-router cdn。

这是我的main.js

import Vue from 'vue'
import App from './App'
import ResourceInfo from '../src/components/ResourceInfo'
var db = firebase.database();
var auth = firebase.auth();

const routes = [
  { path: '/', component: App },
  { path: '/info', component: ResourceInfo }
]

const router = new VueRouter({
  routes
})

/* eslint-disable no-new */
var vm = new Vue({
  el: '#app',
  components: { App },
  created: function() {
    firebase.auth().onAuthStateChanged(function(user) {
        if (user) {
            // Get info for currently signed in user. 
            console.log(user);
            vm.currentUser = user;
             console.log(vm.currentUser);
        } else {
            // No user is signed in.
        }
    })
    // Import firebase data 
    var quizzesRef = db.ref('quizzes');
    quizzesRef.on('value', function(snapshot) {
      vm.quizzes = snapshot.val();
      console.log(vm.quizzes);
    })

    var resourcesRef = db.ref('resources');
    resourcesRef.on('value', function(snapshot) {
      vm.resources.push(snapshot.val());
      console.log(vm.resources);
    })

    var usersRef = db.ref('users');
    usersRef.on('value', function(snapshot) {
      vm.users = snapshot.val();
      console.log(vm.users);
    })
  },
  firebase: {
    quizzes: {
        source: db.ref('quizzes'),
        asObject: true
    },
    users: {
        source: db.ref('users'),
        asObject: true
    }, 
    resources: db.ref('resources')
  },
  data: function() {
    return {
        users: {},
        currentUser: {},
        quizzes: {},
        resources: []
    }
  },
  router,
  render: h => h(App)
})

我的App.vue

<template>
  <div id="app">
    <navbar></navbar>
    <resource-info :current-user="currentUser"></resource-info>
    <router-view></router-view>
  </div>
</template>

<script>
import Navbar from './components/Navbar'
import ResourceInfo from './components/ResourceInfo'

export default {
  name: 'app',
  props: ['current-user'],
  components: {
    Navbar,
    ResourceInfo
  }
}
</script>

<style>
</style>

Answer 1

在 main.js 文件中，您需要按如下方式导入VueRouter：

import Vue from "vue"               // you are doing this already
import VueRouter from "vue-router"  // this needs to be done

在此之下，您需要按如下方式初始化路由器模块：

// Initialize router module
Vue.use(VueRouter)

除了上述内容，我在代码中找不到任何其他内容，对我来说似乎没问题。

请参阅 NPM 部分下的文档中的安装页面： http://router.vuejs.org/en/installation.html

Answer 2

首先使用＆＃34; npm install vue-route＆＃34;安装vue路由器。并按照main.js中的下方进行操作

import Vue from 'vue'
import Router from 'vue-router'
import App from './App'
import ResourceInfo from '../src/components/ResourceInfo'
var db = firebase.database();
var auth = firebase.auth();

Vue.use(Router)
var router = new Router({
  hashbang: false,
  history: true,
  linkActiveClass: 'active',
  mode: 'html5'
})

router.map({
   '/': {
    name: 'app',
    component: App
  },
  '/info': {
    name: 'resourceInfo',
    component: ResourceInfo
  }
})
// If no route is matched redirect home
router.redirect({
  '*': '/'
});

// Start up our app
router.start(App, '#app')

这可能会解决您的问题

Answer 3

您忘记导入 vue-router 并在main.js中初始化VueRouter

import VueRouter from "vue-router"

Vue.use(VueRouter)

Vue路由器路由器查看错误

3 个答案: