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

　　　　

　　因此：

　　　　SPA（Single Page Application）单页面应用程序

　　　　　　? 后端渲染（存在性能问题）--------------发展最初

　　　　　　? Ajax前端渲染（前端渲染局部刷新网页，提高性能，但是不支持浏览器的前进后退操作）----------------发展中

　　　　　　? SPA（Single Page Application）： ---------------发达

　　　　　　　　整个网站只有一个页面，内容的变化通过Ajax局部更新实现、同时支持浏览器地址栏的前进和后退操作

　　　　　　? SPA实现原理之一：基于URL地址的hash（hash的变化会导致浏览器记录访问历史的变化、但是hash的变化不会触发新的URL请求）

　　　　　　? 在实现SPA过程中，最核心的技术点就是前端路由

 

　　2. 前端路由

　　　　?概念：根据不同的用户事件，显示不同的页面内容

　　　　?本质：用户事件与事件处理函数之间的对应关系

　　　　

 

不推荐手动模拟路由，尽量使用 Vue.js 官方的路由管理器--------------Vue Router

◆ 2、vue-router的基本使用

<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,
      });