Vue 路由之那些事儿（一）！！！

路由

• 路由：根据不同的请求 pathname,做不同的操作

• 前端路由：单页面应用中由前端控制路由，根据不同的路由显示不同的页面(其实是不同的组件)；单页面应用（SPA）只有一个 html 文件,切换路由是切换组件，而不会请求其他的 html 文件；

• vue-router:

• vue 的单页面应用路由需要使用 vue-router; vue-router 监听页面的路由发生变化（页面的 url 就是前端路由），渲染对应的组件

• 使用 vue-router 需要使用以下组件：

• <router-link to=""></router-link> 是一个 vue-router 定义的标签，通过它可以切换到 to 属性指向的路由，如由这个路由对应的组件，就会把这个组件展示到 router-view

• <router-view></router-view> 用来展示路由对应的组件

<div id="app">
  <!--router-link 叫做编程式导航-->
  <router-link to="/" tag="button">HOME</router-link> <!--router-link是用来切换路由的，
  to 是指定点击router-link时要跳转到的路由
  tag指定router-link以什么标签渲染到页面中-->
  <router-link to="/home" tag="button">主页</router-link>
  <router-link to="/list" tag="button">LIST</router-link>

  <router-view></router-view>
</div>

在这里插入let home = {
    template: `<div>HOME</div>`
  };
  let list = {
    template: `<div>LIST</div>`
  };

  let fourOFour = {
    template: '<div>NOT FOUND</div>'
  };

  // 使用vue-router需要配置路由映射表
  let routes = [
    {
      path: '/', // path是路由
      component: home // 路由对应的组件
    },
    {
      path: '/home',
      component: home
    },
    {
      path: '/list',
      component: list
    },
    {
      path: '*', // 除了路由映射表中配置的路由以外的路由，页面渲染成home / fourOFour
      component: fourOFour
    }
  ];

  // 创建一个VueRouter的实例
  let router = new VueRouter({
    routes: routes // 创建VueRouter实例时，要传入路由映射表
  });

  // 创建Vue实例时配置router属性
  let vm = new Vue({
    el: '#app',
    router: router // 配置router属性
  });

vue-router 用法

1. 安装并引入 vue-router.js
2. 设置路由映射表
3. 创建 VueRouter 的实例，创建 VueRouter 实例时需要传入路由映射表；
4. 创建 Vue 实例时配置 router 属性, router 属性的值是 VueRouter 的实例