vue.js - Vue.js 实现路由器
问题描述
我正在做一个关于 Vue.js 的教程并遇到了这个问题。当我尝试在 main.js 中导入路由器时出现此问题。当我运行服务器时,我得到了这个错误。
控制台上的错误:
Uncaught TypeError: Cannot read property 'use' of undefined
at eval (main.js?56d7:6)
at Module../src/main.js (app.js:1475)
at __webpack_require__ (app.js:849)
at fn (app.js:151)
at Object.1 (app.js:1500)
at __webpack_require__ (app.js:849)
at checkDeferredModules (app.js:46)
at app.js:925
at app.js:928
Main.js
import Vue from 'vue'
import App from './App.vue'
import Router from 'vue-router'
import routes from './router.js'
Vue.use(Router);
new Vue({
render: h => h(App),
router: routes,
}).$mount('#app')
解决方案
vue-router
不公开一个 Vue 插件,而是一个返回配置插件的构造函数。
您应该查看文档(#Getting started 部分)。
安装vue-router
包括三个步骤:
- 声明您的路线并将每个视图组件分配给您的路线
- 导出构建的路由器
- 在您的应用程序中使用路由器。
// 1. Define route components.
// These can be imported from other files
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
// 2. Define some routes
// Each route should map to a component. The "component" can
// either be an actual component constructor created via
// `Vue.extend()`, or just a component options object.
// We'll talk about nested routes later.
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
// 3. Create the router instance and pass the `routes` option
// You can pass in additional options here, but let's
// keep it simple for now.
const router = new VueRouter({
routes // short for `routes: routes`
})
// 4. Create and mount the root instance.
// Make sure to inject the router with the router option to make the
// whole app router-aware.
const app = new Vue({
router
}).$mount('#app')
// Now the app has started!
推荐阅读
- applescript - Applescript一个窗口调整大小,另一个没有
- agda - 在 Cubical 模式下定义非一元函数
- php - How to decode json, group by a column value, and sum values in each group?
- javascript - AngularJS路由阻止默认并继续
- three.js - GLTFLoader global variable undefined
- html - 我怎样才能只用css设计一个句子的第一个单词
- oracle-golden-gate - Sizing requirements for Oracle downstream mining database while using Oracle Golden gate Downstream Integrated Capture
- python-3.x - Python, CrossWord, Gui
- reactjs - Why react state binding not work when i render children not in props
- c++ - Segmentation C++ no print messages in online compiler