一.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>