vue路由vue-route

首先先引入插件

<script src="Vue.js"></script>    //vue.js在前面
<script src="vue-route.js"></script>

然后写在页面展示的代码

<div id="div">
    <ul>
        <li><a v-link="{path:'/home'}">首页</a></li>
        <li><a v-link="{path:'/news'}">新闻</a></li>
    </ul>
    <router-view></router-view>
</div>

实现路由的js代码

<script>
    //1.开启路由;
    var app = Vue.extend();
    //2.定义模板:
    var Home = Vue.extend({
        template: '<h3>我是首页的内容</h3>'
    });
    var News = Vue.extend({
        template: '<h3>我是新闻的内容</h3>'
    });
    //3.定义路由:
    var Router = new VueRouter();
    Router.map({
        '/home': {
            component: Home
        },
        '/news': {
            component: News
        }
    });
    //开始:
    Router.start(app,'#div');
</script>