vue router-view使用详解

本文已参与[新人创作礼]活动，一起开启掘金创作之路

这里写目录标题

• • 一、介绍
  • 二、使用方法
  • • 1 实现效果
    • 2 代码

一、介绍

  router-view组件作为vue最核心的路由管理组件，在项目中作为路由管理经常被使用到。vue项目最核心的App.vue文件中即是通过router-view进行路由管理。

<template>
  <div id="app">
      <router-view></router-view>
  </div>
</template>

我们在自己维护项目的时候，也可以使用router-view组件进行路由管理，对于页面局部刷新的场景，该组件能发挥关键作用；

二、使用方法

  我们通过具体场景来介绍router-view组件用法：

1 实现效果

通过切换底部导航栏进行页面内容区域切换：

实现的功能是：点击消息、联系人、动态；页面内容进行切换；页面标题以及底部导航栏不变；

2 代码

最关键的是router.js配置：

{
    path: "/routerViewPractice",
    name: "routerViewPractice",
    component: () => import("@/views/routerView/index.vue"),
    redirect: '/messagePage',//页面默认加载的路由
    children: [
      {
        path: "/messagePage",
        name: "messagePage",
        component: () => import("@/views/routerView/childPages/messagePage.vue")
      },
      {
        path: "/contactPage",
        name: "contactPage",
        component: () => import("@/views/routerView/childPages/contactPage.vue")
      },
      {
        path: "/dynamicPage",
        name: "dynamicPage",
        component: () => import("@/views/routerView/childPages/dynamicPage.vue")
      }
    ]
  }

文件说明：

• routerViewPractice：父路由path；
• redirect：页面router-view组件默认加载的路由；
• children：用于父页面进行切换的子路由；

vue父页面代码：

<template>
  <div>
    <title-bar :title="title" @goBack="goback"></title-bar>
    <router-view></router-view>
    <BottomBar
     @handleMsg='handleMsg'
     @lookContact='lookContact'
     @readDynamic='readDynamic'
    ></BottomBar>
  </div>
</template>
<script>
import TitleBar from "@/components/TitleBar";
import BottomBar from "@/components/BottomBar";
export default {
  name: "",
  components: {
    TitleBar,
    BottomBar
  },
  data() {
    return {
      title: "路由视图",
    };
  },
  methods: {
    // 返回方法
    goback() {
      // this.$emit("GoBack");
    },
    handleMsg() {
      this.$router.push({path: '/messagePage'})
    },
    lookContact() {
      this.$router.push({path: '/contactPage'})
    },
    readDynamic() {
      this.$router.push({path: '/dynamicPage'})
    }
  }
};
</script>
<style scoped>
#page-title {
  width: 100%;
  background-color: #fff;
  display: flex;
  justify-content: center;
}
.backImg {
  width: 20px;
}
</style>

使用this.$router.push进行页面上router-view组件的路由替换；实现点击底部导航栏页面切换功能；

简单的说就是父组件中如果有route-view,子组件跳转的时候就会展示在父组件的router-view中

router-view组件有个属性key的作用

由于 Vue 会复用相同组件, 所以当同一个组件不同路由发生跳转时将不在执行created, mounted之类的钩子函数 , 设置key之后会在虚拟DOM阶段比对跳转前后得key值,如果不同则重新销毁重建页面

key的属性值 key属性值为 $route.path

<router-view :key="$route.path"/> 

1.当路由地址变化为 /category/sub1 ==> /category/sub2时

由于这两个路由的$route.path不一样, 所以组件被强制重新加载

相关钩子加载顺序为 : beforeRouteUpdate => created => mounted

2.当路由地址变化为 /category/sub?id=1 ==> /category/sub?id=1时

由于这两个路由的$route.path一样, 所以组件被复用, 不重新加载

相关钩子加载顺序为 : beforeRouteUpdate

key属性值为 $route.fullPath

<router-view :key="$route.fullPath"/> 

1.当路由地址变化为 /category/sub1 ==> /category/sub2时

2.当路由地址变化为 /category/sub?id=1 ==> /category/sub?id=1时

这两种情况由于这两个路由的$route.fullPath都不一样, 所以组件被强制重新加载

相关钩子加载顺序为 : beforeRouteUpdate => created => mounte