Vue基础（五）---- 前端路由

<div id="app">
      <!-- router-link 是 vue 中提供的标签，默认会被渲染为 a 标签 -->
      <!-- to 属性默认会被渲染为 href 属性 -->
      <!-- to 属性的值默认会被渲染为 # 开头的 hash 地址 -->
      <router-link to="/user">User</router-link>
      <router-link to="/register">Register</router-link>
      
      <!-- 路由占位符 -->
      <!-- 将来通过路由规则匹配到的组件，将会被渲染到 router-view 所在的位置 -->
      <router-view></router-view>
 </div>

const User = {
  template: "<h1>User 组件</h1>",
};

const Register = {
  template: "<h1>Register 组件</h1>",
};

　// 创建路由实例对象
      const router = new VueRouter({
        // 所有的路由规则
        routes: [
          // 每个路由规则都是一个配置对象，其中至少包含 path 和 component 两个属性：
          // path 表示当前路由规则匹配的 hash 地址
          // component 表示当前路由规则对应要展示的组件
          { path: "/user", component: User },
          { path: "/register", component: Register },
        ],
      });

// 创建 vm 实例对象
      const vm = new Vue({
        // 指定控制的区域
        el: "#app",
        data: {},
        // 挂载路由实例对象
        // router: router（在ES6中如果属性名和值一样，可以简写）
        router,
      });