vue生成路由實例, 使用單個vue文件模板生成路由

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