关于vue.js:vue-routerview使用详解

一、介绍

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