]}
6. 入口文件
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue Router Demo</title>
</head>
<body>
<div id="app">
<router-view></router-view>
</div>
<script src="dist/bundle.js"></script>
</body>
</html>其中 id 为 app 的 div 是页面容器，其中的 router-view 会由 vue-router 去渲染组件，讲结果挂载到这个 div 上。
app.js
var Vue = require('vue');
var VueRouter = require('vue-router');Vue.use(VueRouter);
Vue.config.debug = true;
Vue.config.delimiters = ['${', '}']; // 把默认的{{ }} 改成ES6的模板字符串 ${ }
Vue.config.devtools = true;
var App = Vue.extend({});
var router = new VueRouter({});
router.map(require('./routes'));
router.start(App, '#app');
router.go({"path":"/"});
这是 vue 路由的配置。 其中由于习惯问题，我把 vue 默认的{{ }} 改成了的 ${ } ,总感觉这样看模板，才顺眼一些。
routes.js
module.exports = {
'/': {
component: require('./components/index')
},
'/list': {
component: require('./components/list')
},
'*': {
component: require('./components/notFound')
}
}
7. 第一个组件
components/index.js
module.exports = {
template: require('../templates/index.html'), ready: function () {
}
};
templates/index.html
<h1>Index</h1>
<hr/>
<p>Hello World Index!</p>执行 webpack 构建命令
浏览器中访问：
查看 bundle 源码：
发现 template 模板文件，已经被 webpack 打成字符串了。这其中，其实是 webpack 的 html-loader 起的作用
8. 组件之间跳转
修改刚才的 index 组件，增加一个跳转链接，不用 href 了，要用 vue 的指令 v-link。
<h1>Index</h1>
<hr/>
<p>Hello World Index!</p>
<p><a v-link="{path:'/list'}" >List Page</a></p>
