vue router-view使用詳解

1、介紹

  router-view組件做爲vue最核心的路由管理組件，在項目中做爲路由管理常常被使用到。vue項目最核心的App.vue文件中便是經過router-view進行路由管理。

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

咱們在本身維護項目的時候，也能夠使用router-view組件進行路由管理，對於頁面局部刷新的場景，該組件能發揮關鍵做用；

2、使用方法

  咱們經過具體場景來介紹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組件的路由替換；實現點擊底部導航欄頁面切換功能；