实战 Vue 之了解 vue-router 路由配置、跳转与传参

前言

路由是SPA单页面应用中必不可少的一部分，学好路由的使用也是学习 Vue 这门框架必备的技能之一。今天就给大家分享一下vue-router 路由配置、跳转与传参。
本文所述的 vue-router 版本为 3.0.6。

一、vue-router 路由配置

import Discussion from '../components/Discussion.vue';
import MyInfo from '../components/MyInfo.vue';
import Index from '../components/Index.vue';
import Login from '../components/Login.vue';
export default {
    routes: [
        {path: '/', redirect: '/index'},
        {path: '/index', name: 'index', component: Index},
        {path: '/discussion', name: 'discussion', component: Discussion},
        {path: '/myInfo', name: 'myInfo', component: MyInfo},
        {path: '/login', name: 'login', component: Login},
    ],
    mode: "history"
};

1. 路由配置属性主要有 path、name、component 等。
   path：组件相对路径
   name：组件路径别名
   component：组件地址
2. 需要注意的是如果要配置默认路径，则用 redirect 属性。
   用法为 {path: ‘/’, redirect: ‘/index’},表示重定向到 ‘/index’ 这个组件页面。但是这个页面也是要配置的。

 {path: '/', redirect: '/index'},
 {path: '/index', name: 'index', component: Index},

3. 配置 mode:“history” 表示浏览器地址不需要 hash，即不显示 ’#‘。
   不配置地址为：http://localhost:8080/#/index
   配置之后地址为：http://localhost:8080/index

二、vue-router 路由跳转

路由跳转有两种方式。

1. route-link 形式，实质是个 a 标签。用法如下：

<template xmlns:v-bind="http://www.w3.org/1999/xhtml">
  <div id="app">
      <div class="tab-position common-flex common-flex-jc-sa">     
          <router-link v-for="(item,index) in tabList"
                        :to="item.name"
                       >
              {{item.title}}
          router-link>
      div>
    <router-view>router-view>
  div>
template>

<script>
  import './css/common.css';
  let self;
  export default {
      data(){
          return{
              tabList:[
                  {title:'首页',name:'index'},
                  {title:'论坛',name:'discussion'},
                  {title:'我的',name:'myInfo'}
              ]          
          }
      },
}
</script>

这种方式只适合做单纯的跳转，也可以带参数，但做不了其他的逻辑处理。比如切换不同的 tab，不仅要跳到相应的组件页面，还需要修改 tab 样式。

2. 直接使用点击事件，用法如下：

  <template xmlns:v-bind="http://www.w3.org/1999/xhtml">
  <div id="app">
      <div class="tab-position common-flex common-flex-jc-sa">
        <div v-for="(item,index) in tabList"
             @click="tab(item,index)"
             :class="[tabIndex == index ? activeTitle: activeTitleNo]"
        >
          {{item.title}}
        div>
      div>
    <router-view>router-view>
  div>
template>

<script>
  import './css/common.css';
  let self;
  export default {
      data(){
          return{
              tabList:[
                  {title:'首页',name:'index'},
                  {title:'论坛',name:'discussion'},
                  {title:'我的',name:'myInfo'}
              ],
              tabIndex:0,
              activeTitle:'active-title',
              activeTitleNo:'active-title-no',           
          }
      },
      created(){
        self = this;
      },
      methods:{
         changeTab:(item,index)=>{
              self.tabIndex = index;         
              self.$router.push({name:item.name});
          },
    }
}
</script>

三、vue-router 路由传参

上面有提到两种路由跳转方式，相应的路由传参也有两种方式。

1. 组件跳转传参

<template xmlns:v-bind="http://www.w3.org/1999/xhtml">
  <div id="app">
      <div class="tab-position common-flex common-flex-jc-sa">     
          <router-link v-for="(item,index) in tabList"
                       :to="{path:item.name,param:{id:item.id}}"                   
                       >
              {{item.title}}
          router-link>
      div>
    <router-view>router-view>
  div>
template>

使用 router-link 进行配置，使用 to 属性进行跳转。

2. 事件跳转传参

  <template xmlns:v-bind="http://www.w3.org/1999/xhtml">
  <div id="app">
      <div class="tab-position common-flex common-flex-jc-sa">
        <div v-for="(item,index) in tabList"
             @click="changeTab(item,index)"
             :class="[tabIndex == index ? activeTitle: activeTitleNo]"
        >
          {{item.title}}
        div>
      div>
    <router-view>router-view>
  div>
template>

<script>
  import './css/common.css';
  let self;
  export default {
      data(){
          return{
              tabList:[
                  {title:'首页',name:'index',id:0},
                  {title:'论坛',name:'discussion',id:1},
                  {title:'我的',name:'myInfo'id:2}
              ],
              tabIndex:0,
              activeTitle:'active-title',
              activeTitleNo:'active-title-no',          
          }
      },
    methods:{
          changeTab:(item,index)=>{
              self.tabIndex = index;          
              self.$router.push({name:item.name,param:{id:item.id}});
          },
    }
}
</script>

这种方式就可以修改跳转对应的 tab 样式，使其成激活状态。
需要注意的是不管是第1种还是第2种，其下方都只需要配置一个 router-view 组件，表示对应的组件内容。

3. 不同的属性
   传参的时候根据跳转的方式不同而不同，但是传参的属性不仅可以使用 param，还可以使用 query。区别是 query 是在地址栏拼接参数的形式，即在地址栏可以看到参数。

http://localhost:8080/discussion?id=1

4. 获取参数
   在组件内部调用 created 钩子函数获取参数。

created(){      
     console.log(this.$route.param)
}

注意这里获取参数的时候是 this. $route。而路由跳转的时候是this.$router.push。一个是 $route，一个是 $router。

5. 总结
   综上所述，最好的路由跳转和传参方式就是使用事件跳转，并且使用 param 属性进行传参。

 this.$router.push({name:item.name,param:{id:item.id}});