目录结构:
package.json:
"dependencies": {
"vue": "^2.0.0-rc.1",
"vue-router": "^0.7.13"
},
"devDependencies": {
"babel-core": "^6.0.0",
"babel-loader": "^6.0.0",
"babel-preset-es2015": "^6.13.2",
"cross-env": "^1.0.6",
"css-loader": "^0.23.1",
"file-loader": "^0.8.4",
"vue-loader": "^9.2.2",
"webpack": "^2.1.0-beta.20",
"webpack-dev-server": "^2.1.0-beta.0"
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>vue-router</title>
</head>
<body>
<div id="app"></div>
<script src="dist/build.js"></script>
</body>
</html>
main.js:
import Vue from 'vue'
import App from './App.vue'
import Home from './components/Home.vue'
import About from './components/About.vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter()
router.map({
'/home': {
component: Home
},
'/about': {
component: About
}
})
router.redirect({
'*': '/home'
})
router.start(App, '#app')
App.vue:
<template lang="html">
<div id="app">
<div class="left">
<a v-link="{ path: '/home'}">Home</a>
<a v-link="{ path: '/about'}">About</a>
</div>
<div class="right">
<router-view></router-view>
</div>
</div>
</template>
这样运行会报错
[Error] TypeError: undefined is not an object (evaluating 'Vue.internalDirectives.component')
难道是vue2.0兼容问题?
是的,api改过了
https://github.com/vuejs/vue-...