一.vue-loader与vue-router配合
$ cnpm install vue-router --save
二.生成vue-webpack模板
$ vue init webpack-simple vue-demo
三.生成路由实例
src/App.vue
<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>
src/main.js
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)
})
src/router.config.js (路由控制)
import Home from "../components/Home.vue"
import News from "../components/News.vue"
export default{
routes:[
{path:'/home', component:Home},
{path:'/news', component:News}
]
}
components/Home.vue
<template>
<div id="home">
<h3>我是主页</h3>
</div>
</template>
components/News.vue
<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>