Vue Router

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得非常简单。通过根据不同的请求路径，切换显示不同组件进行渲染页面。

要安装 vue 模块

引入vue-router.js-

html路由切换

<div id="app">
    <div class="header">
        <h1>头部</h1>
    </div>
    <div class="left">
        <p>
        <ul>
            <!-- 方式1: 传统方式 -->
            <li><a href="#/foo">Go Foo</a></li>
            <li><a href="#/bar">Go Bar</a></li>
            <!-- 方式2: 官方推荐 -->
            <!-- <router-link> 默认会被渲染成一个 `<a>` 标签， -->
            <!-- 通过传入 `to` 属性指定跳转链接，不用像上面加 `#` 号 -->
            <li>
                <router-link to="/foo">Go to Foo</router-link>
            </li>
            <li>
                <router-link to="/bar">Go to Bar</router-link>
            </li>
        </ul>
        </p>
    </div>
    <div class="main">
        <!-- 路由出口： 路由匹配到的组件将渲染在这里 -->
        <router-view></router-view>
    </div>
</div>

js配置路由

<script src="./node_modules/vue/dist/vue.js"></script>
<script src="./node_modules/vue-router/dist/vue-router.js"></script>
<script>
    // 1. 定义组件
    var Foo = {
        template: '<div> foo 组件 </div>'
    } 
    var Bar = {
        template: '<div> bar 组件 </div>'
    } 
    // 2. 配置路由表：当点击特定的 url 时，显示对应的那个组件。
    const router = new VueRouter({
        routes: [ //配置每个路由映射一个组件
            { path: '/foo', component: Foo },
            { path: '/bar', component: Bar }
        ]
    })
    // 3. 注入路由到实例中
    new Vue({
        el: '#app',
        router // router: router
    })
</script>