Vue Router 小白使用说明书

路由是多个URL与多个组件的映射关系。

基本逻辑

<div id="app">
    <!-- 设置用于进行路由操作的组件  默认是a标签，可用tag属性进行修改 -->
    <router-link to="/">首页</router-link>
    <router-link to="/user">用户</router-link>
    <router-link to="/category">分类</router-link>

    <!-- 内容切换的展示区域  显示路由匹配到的组件 -->
    <router-view name="sidebar"></router-view>
    <!-- 没有设置 name 的 router-view 默认 name 为 default-->
    <router-view></router-view>
</div>

<script src="lib/vue.js"></script>
<script src="lib/vue-router.js"></script>

<script>
    var SideBar1 = {
      template: `<div>侧边栏1功能</div>`
    };

    var SideBar2 = {
      template: `<div>侧边栏2功能</div>`
    };

    var Index = {
      template: `<div>首页功能</div>`
    };

    var User = {
      template: `<div>用户功能</div>`
    };

    // 定义路由规则
    var routes = [
      {
        path: '/',
        components: {
          // router-view 的 name : 组件配置对象
          default: Index,
          sidebar: SideBar1
        }
      },
      {
        path: '/user',
        components: {
          default: User,
          sidebar: SideBar2
        }
      }
    ];

    // 创建 Vue Router 实例
    var router = new VueRouter({
      routes
    });

    // 创建 Vue 实例，注入 router
    var vm = new Vue({
      el: '#app',
      router
    });
</script>

 动态路由

 将某一类URL都映射到同一个组件时。

在定义路由规则时，将路由中的某个部分使用 ‘:’ 进行标记，即可设置为动态路由。如此，动态部分为任意内容均跳转到同一组件。

• ‘:’ 部分对应的信息称为路径参数，存储在`vm.$route.params`中。
• 也可以通过路由的props设置数据，进行参数的传递。

  <div id="app">
    <router-link to="/user/1">用户1</router-link>
    <router-link to="/user/2">用户2</router-link>
    <router-link to="/user/3">用户3</router-link>

    <router-view></router-view>
    <router-view name="sidebar"></router-view>
    <router-view name="sidebar2"></router-view>

  </div>
  <script src="lib/vue.js"></script>
  <script src="lib/vue-router.js"></script>
  <script>
    // 设置组件  使用 $route.params.id 拿到每一个具体的路径参数 
    var User = {
      template: `<div>这是用户 {{ $route.params.id }} 的功能</div>`
    };
    // 比起上一种接收数据的方式，复用性更高，不用于路由耦合
    // 接收了路由传入的参数
    var Category = {
      props: ['id'],
      template: `<div>这是分类 {{ id }} 功能</div>`
    };
    var SideBar = {
      template: `<div>侧边栏功能</div>`
    };

    var SideBar2 = {
      props: ['a', 'b'],
      template: `
      <div>
        侧边栏2功能: {{ a }} {{ b }}
      </div>`
    };

    // 设置路由规则 多url映射到同一个组件
    var routes = [
      {
        path: '/user/:id', component: User
      },
      // props 接收路由的参数
      {
        path: '/category/:id',
        components: {
          default: Category,
          sidebar: SideBar,
          sidebar2: SideBar2
        },
        props: {
          default: true,
          sidebar: false,
          // 传递静态数据
          sidebar2: {
            a: '状态1',
            b: '状态2'
          }
        }
      }
    ];

    var router = new VueRouter({ routes });
    var vm = new Vue({
      el: '#app',
      router
    });
  </script>

 侦听路由参数

如果要响应路由的参数变化，可以通过 watch 监听 $route。不然由于组件是被复用的，生命周期钩子也监测不到。

<script>
    // 设置组件 
    var User = {
      template: `
        <div>
          这是用户 {{ $route.params.id }} 的功能
          <input type="text">
        </div>`,
      // 由于组件没有重新创建，所以生命周期钩子只能执行一次
      /* created () {
        console.log('创建了组件的实例');
      } */
      watch: {
        $route (route) {
          // console.log(route);
          console.log(route.params.id)
        }
      }
    };

    // 设置路由规则
    var routes = [
      {
        path: '/user/:id', component: User
      }
    ];

    var router = new VueRouter({ routes });
    var vm = new Vue({
      el: '#app',
      router
    });
  </script>

嵌套路由

  <div id="app">
    <router-link to="/user">用户功能</router-link>
    <router-view></router-view>
  </div>
  <script src="./lib/vue.js"></script>
  <script src="./lib/vue-router.js"></script>
  <script>
    var User = {
      template: `
        <div>
          <h3>这是 User 组件的功能</h3>
          <router-link to="/user/hobby">爱好功能</router-link>
          <router-link to="/user/info">用户信息</router-link>
          <router-view></router-view>
        </div>
      `
    };

    var UserHobby = {
      template: `<div> UserHobby 组件</div>`
    };

    var UserInfo = {
      template: `
        <div> 
          UserInfo 组件
          <router-link to="/user/info/school">学校信息</router-link>
          <router-view></router-view>
        </div>`
    };

    var UserInfoSchool = {
      template: `<div> UserInfoSchool 组件</div>`
    };

    var routes = [
      {
        path: '/user',
        component: User,
        children: [
          {
            path: 'hobby',
            component: UserHobby
          },
          {
            path: 'info',
            component: UserInfo,
            children: [
              {
                path: 'school',
                component: UserInfoSchool
              },
            ]
          }
        ]
      }
    ];

    var router =  new VueRouter({ routes });
    var vm = new Vue({
      el: '#app',
      router
    });
  </script>

 编程式导航

通过方法设置导航。如下是v-bind简写，实际是利用了`vm.$router.push(' ')`方法。

<!-- 声明式导航 -->
<!-- <router-link to="/user/200">用户200</router-link> -->

<!-- 编程式导航 -->
<router-link :to="{ path: '/user/700' }">用户700</router-link>

 命名路由（编程式导航）

  <div id="app">
    // name 简便了
    <router-link :to="{ name: 'school', params: { id: 10 } }">学校10</router-link>

    <router-view></router-view>
  </div>
  <script src="lib/vue.js"></script>
  <script src="lib/vue-router.js"></script>
  <script>
    var School = {
      template: `<div>School 组件的功能： {{ $route.params }}</div>`
    };

    var routes = [
      {
        path: '/user/:id/info/school',
        name: 'school', // 通过声明name属性，绑定了这个路由，简便了
        component: School
      }
    ];

    var router = new VueRouter({ routes });
    var vm = new Vue({
      el: '#app',
      router
    });


  </script>

重定向

将不合理的 url 重定向到指定路由去。

var router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Index
    },
    {
      path: '/category/:id',
      component: Category
    },
    {
      path: '/category',
      redirect: '/'   // 重定向
    }
  ]});

别名

path 太长，显示给用户为别名 alias

<div id="app">
    <router-link :to="{ name: 'school', params: { id: 10, date: '0612'} }">学校信息    </router-link>
    <router-link to="/20/1234">学校信息2</router-link>
    <router-view></router-view>
</div>
  <script src="lib/vue.js"></script>
  <script src="lib/vue-router.js"></script>
  <script>
    // 组件
    var School = {
      template: `
        <div>School 组件</div>
      `
    };

    // 路由规则
    var router = new VueRouter({
      routes: [
        {
          path: '/user/:id/info/school/:date',
          name: 'school',
          component: School,
          alias: '/:id/:date'   //别名
        }
      ]
    });

    var vm = new Vue({
      el: '#app',
      router
    });

 导航守卫

当路由发生改变时，通过跳转或取消的方式进行守卫。（弹出登录框等）

// 设置导航守卫             去哪 来自哪 是否下一步（默认false）
router.beforeEach(function (to, from, next) {
  // console.log(to, from);
  // next();  // 一定要写，表示下一步开启
  // next(false);

  // 如果来自/user，就跳转到/category
  if (to.path === '/user') {
    next('/category');
  } else {
    next();  // 否则不处理 直接next
  }
});