【Vue.js学习笔记】21：路由转移的多种方式,多路由拼图

学习b站上的小马视频。

路由转移的多种方式

前面学习的使用路由的方式都是下面这样：

<router-link to="路由URL"></router-link>

还可以用传递一个路由对象的方式，灵活的实现路由。

App.vue

在上篇的例子的基础上，只改这个文件。需要注意的是，传递路由对象时，如果要使用name属性，name属性的值应该是组件的名称，而不是映射到的路由的名称。

<template>
  <div id="app">
    <!--在这里设置去不同页面的路由-->
    <p>
      <router-link to="/">主页</router-link>

      <br><br>传统方式(直接传递url):
      <router-link to="/player/1">第一页</router-link>
      <router-link to="/player/2">第二页</router-link>

      <br><br>在触发的方法中做路由转移:
      <button v-on:click="btnClick(1)">第一页</button>
      <button v-on:click="btnClick(2)">第二页</button>

      <br><br>传递对象的方式:
      <router-link v-bind:to="{name:'player',params:{uid:1}}">第一页</router-link>
      <router-link v-bind:to="{path:'/player/2'}">第二页</router-link>
    </p>

    <hr>
    <router-view/>
  </div>
</template>

<script>
  export default {
    name: 'App',
    methods: {
      //点击按钮时触发的方法
      btnClick(uid) {
        console.log("用push方法进行路由的转移,传入路由对象");
        // this.$router.push({path: `/player/${uid}`});
        this.$router.push({name: 'player', params: {uid: uid}});
      }
    }
  }
</script>

<style>
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
</style>

运行结果

GET形式的路由

在路由对象里使用query参数，得到的路由形式就是GET请求的那种形式了：

this.$router.push({name: 'Player', query: {uid: uid}});

转移到的URL的形式如下：

http://localhost:8080/#/?uid=1

URL履历控制

这里-1就是往之前的走，+1就是往之后的走。

this.$router.go(-1);

多路由拼图

为一个路由指定多个组件，由多个组件共同来完成这个路由对应的页面。

router/index.js

一个路由配置了多个组件。

import Vue from 'vue'
import Router from 'vue-router'

import Header from '../page/xiaoma/Header'
import SideBar from '../page/xiaoma/SideBar'
import Detail from '../page/xiaoma/Detail'

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      //这里改用components,指定多个要使用的组件
      components: {
        myHeader: Header,
        mySideBar: SideBar,
        myDetail: Detail
      }
    }
  ]
})

App.vue

用name区分开这些组件，这些视图拼在一起完成这个页面。

<template>
  <div id="app">
    <table width="100%">
      <tr>
        <td colspan="2" style="background-color: darkseagreen">
          <!--使用多组件拼图时,指明其name即可关联到相应的组件上-->
          <router-view name="myHeader"></router-view>
        </td>
      </tr>
      <tr>
        <td width="20%" style="background-color: thistle">
          <router-view name="mySideBar"></router-view>
        </td>
        <td width="80%" style="background-color: lightgray">
          <router-view name="myDetail"></router-view>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
  export default {
    name: 'App'
  }
</script>

<style>
  #app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  }
</style>

运行结果