vue生成路由实例, 使用单个vue文件模板生成路由

$ cnpm install vue-router --save

$ vue init webpack-simple vue-demo

<template>
<div id="app">
{{msg}}
<ul>
<li><router-link to="/home">主页</router-link></li>
<li><router-link to="/news">新闻</router-link></li>
</ul>
<div>
<transition
enter-active-class="animated zoomInleft"
leave-active-class="animated zoomOutRight"
>
<router-view></router-view>
</transition>
</div>
</div>
</template>

import Vue from 'vue'
import VueRouter from 'vue-router'import App from './App.vue'
import routerConfig from './router.config.js'import "./assets/style/animate.css/animate.css"
Vue.use(VueRouter);// 生成路由实例
var router = new VueRouter(routerConfig)new Vue({
el: '#app',
router,
render: h => h(App)
})

import Home from "../components/Home.vue"
import News from "../components/News.vue"export default{
routes:[
{path:'/home', component:Home},
{path:'/news', component:News}
]
}

<template>
<div id="home">
<h3>我是主页</h3>
</div>
</template>

<template>
<div id="news">
<h3>我是新闻</h3>
<ul>
<li v-for="val in news">{{val}}</li>
</ul>
</div>
</template>
<script>
export default {
name: "news",
data(){
return {
news:["11111","222222","33333333","444444"]
}
}
}
</script>