使用路由后页面不渲染

1. 页面中没有提供 router-view (路由视图)
2. 当前的url地址没有与之匹配的路由规则去处理

  <div id="app">
 	  <!-- 渲染页面 -->
      <router-view></router-view>

      <hr />

      <!-- 通过 router-link 提供一些超链接来实现路由的跳转功能 -->
      <ul>
        <li>
          <router-link to="/home">home</router-link>
        </li>
        <li>
          <router-link to="/list">list</router-link>
        </li>
        <li>
          <router-link to="/about">about</router-link>
        </li>
      </ul>
    </div>

const home = {
  name: "home",

  template: `
    <div>
      <h1>home</h1>
    </div>
  `,
};

		// 实例化路由的实例对象
      const router = new VueRouter({
        mode: "history",
        // 路由规则
        routes: [
          {
            path: "/home",
            component: home,
          },
          {
            path: "/list",
            component: list,
          },
          {
            path: "/about",
            component: about,
          },
        ],
      });

      //  在 new Vue() 时，配置 router 选项，选项值就是 路由实例对象
      var vm = new Vue({
        el: "#app",
        router,
      });