vue之路由安装(二)

1、创建一个项目名叫demo的新项目，项目中引入vue和vue-router的代码：

import Vue from 'vue';

import VueRouter from 'vue-router';

2、创建router

引入router的代码：

var router = new VueRouter()

3、路由得主要是跳转页面，所以首先写两个模板：

var Index = Vue.extend({
template: '<div><h1>index</h1><p>this is index</p></div>',
})

var Detail = Vue.extend({
template: '<div><h1>Detail</h1><p>this is index</p></div>'
})
4、路径跳转

Vue.use(VueRouter);
router.map({'/index': { component:Index}, '/detail': { component:Detail} })

export default router;

5、<router-view></router-view>，表示两个模板渲染到的位置：
6、跳转的代码：
<div class="">
<a class="" v-link="{ path: '/index'}">Index</a>
<a class="" v-link="{ path: '/detail'}">Detail</a>
</div>
7、启动

app.js写入
router.start(App, '#app')
然后在本项目的运行目录窗口下输入npm run dev即可运行本项目，点击index跳转到index页面，点击detail跳转到detail页面