一、介绍

  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组件的路由替换；实现点击底部导航栏页面切换性能；