Vue.js 生态之vue-router

vue-router是什么~~

vue-router是Vue的路由系统，定位资源的，我们可以不进行整页刷新去切换页面内容。

vue-router的安装和基本配置

vue-router.js 可以下载 也可以用cdn，基本配置信息看如下代码~~~

// html 代码
<div >
    <div>
        <router-link to="/">首页</router-link>
        <router-link to="/about">关于我们</router-link>
    </div>
    <div>
        <router-view></router-view>
    </div>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src="../js/router_demo.js"></script>
// js 代码
var routes = [
    {
        path: "/",
        component: {
            template: `<div><h1>首页</h1></div>`
        }
    },
    {
        path: "/about",
        component: {
            template: `<div><h1>关于我们</h1></div>`
        }
    }
]

var router = new VueRouter({
    routes: routes,
    // 路由去掉#
    // mode: 'history',
});

var app = new Vue({
    el: '#app',
    router: router,
});

vue-router demo