快捷導(dǎo)航

詳解Vue中router-view組件的使用

更新時間：2023年06月18日 15:20:03 作者：Saga?Two

router-view組件作為vue最核心的路由管理組件，在項目中作為路由管理經(jīng)常被使用到，所以下面小編就來和大家詳細(xì)聊聊router-view組件的具體使用方法，希望對大家有所幫助

一、介紹

router-view組件作為vue最核心的路由管理組件，在項目中作為路由管理經(jīng)常被使用到。vue項目最核心的App.vue文件中即是通過router-view進(jìn)行路由管理。

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

我們在自己維護(hù)項目的時候，也可以使用router-view組件進(jìn)行路由管理，對于頁面局部刷新的場景，該組件能發(fā)揮關(guān)鍵作用；

二、使用方法

我們通過具體場景來介紹router-view組件用法：

1 實現(xiàn)效果

通過切換底部導(dǎo)航欄進(jìn)行頁面內(nèi)容區(qū)域切換：

實現(xiàn)的功能是：點擊消息、聯(lián)系人、動態(tài)；頁面內(nèi)容進(jìn)行切換；頁面標(biāo)題以及底部導(dǎo)航欄不變；

2 代碼

最關(guān)鍵的是router.js配置：

{
    path: "/routerViewPractice",
    name: "routerViewPractice",
    component: () => import("@/views/routerView/index.vue"),
    redirect: '/messagePage',//頁面默認(rèn)加載的路由
    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組件默認(rèn)加載的路由；
children：用于父頁面進(jìn)行切換的子路由；

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進(jìn)行頁面上router-view組件的路由替換；實現(xiàn)點擊底部導(dǎo)航欄頁面切換功能；

以上就是詳解Vue中router-view組件的使用的詳細(xì)內(nèi)容，更多關(guān)于Vue router-view的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: