前言

<router-view> 是 Vue Router 提供的一個(gè)用于動(dòng)態(tài)顯示匹配到的組件內(nèi)容的組件。在單頁(yè)面應(yīng)用中，頁(yè)面的切換是通過(guò)路由的變化來(lái)實(shí)現(xiàn)的，而 <router-view> 負(fù)責(zé)根據(jù)當(dāng)前路由匹配到的組件渲染相應(yīng)的內(nèi)容。

下面是 <router-view> 的一些使用詳解：

基本使用：

在主模板中使用 <router-view> 標(biāo)簽，它會(huì)根據(jù)當(dāng)前路由的匹配情況動(dòng)態(tài)渲染對(duì)應(yīng)的組件。

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

<script>
export default {
  // 組件的其他配置
};
</script>

嵌套路由：

<router-view> 可以嵌套使用，以支持嵌套路由的場(chǎng)景。在父組件中使用多個(gè) <router-view> 標(biāo)簽，每個(gè)標(biāo)簽對(duì)應(yīng)一個(gè)具體的嵌套路由。

<template>
  <div>
    <header>Header</header>
    <router-view></router-view>
    <footer>Footer</footer>
  </div>
</template>

命名視圖：

使用 <router-view> 標(biāo)簽時(shí)，你還可以為其指定 name 屬性，從而支持命名視圖，這在同時(shí)展示多個(gè)視圖的情況下很有用。

<template>
  <div>
    <router-view name="header"></router-view>
    <router-view></router-view>
    <router-view name="footer"></router-view>
  </div>
</template>

在路由配置中，對(duì)應(yīng)的路由定義也需要添加 components 字段：

const routes = [
  {
    path: '/',
    components: {
      default: Home,
      header: Header,
      footer: Footer
    }
  }
];

動(dòng)態(tài)組件：

<router-view> 也支持渲染動(dòng)態(tài)組件。你可以通過(guò)在路由配置中使用 component 字段，將組件與路由進(jìn)行關(guān)聯(lián)。

const routes = [
  {
    path: '/dynamic',
    component: () => import('./DynamicComponent.vue')
  }
];

在模板中：

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

過(guò)渡效果： 

如果你希望在切換路由時(shí)添加過(guò)渡效果，可以在 <router-view> 外層包裹 <transition> 標(biāo)簽。

<template>
  <div>
    <transition name="fade" mode="out-in">
      <router-view></router-view>
    </transition>
  </div>
</template>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

在上述例子中，路由切換時(shí)會(huì)產(chǎn)生淡入淡出的過(guò)渡效果。

這些是 <router-view> 的一些基本用法和高級(jí)特性。在 Vue Router 中，<router-view> 是實(shí)現(xiàn)動(dòng)態(tài)路由渲染的核心組件，通過(guò)合理配置路由和使用 <router-view>，你可以構(gòu)建出強(qiáng)大且靈活的單頁(yè)面應(yīng)用。

附：vue使用router-view調(diào)用頁(yè)面

在項(xiàng)目中，需要在其中一個(gè)頁(yè)面，調(diào)用很多其他頁(yè)面的表單，所以使用router來(lái)實(shí)現(xiàn)頁(yè)面的調(diào)用。

vue-router有傳遞參數(shù)的兩種方式，get和post。

1.get方式

頁(yè)面跳轉(zhuǎn)

this.$router.push({path:'/xxx',query:{id:1}});//類似get傳參，通過(guò)URL傳遞參數(shù)

新頁(yè)面接收參數(shù)

this.$route.query.id

2.post方式

頁(yè)面跳轉(zhuǎn)

 //由于動(dòng)態(tài)路由也是傳遞params的，所以在 this.$router.push() 方法中 path不能和params一起使用
 //否則params將無(wú)效。
 //需要用name來(lái)指定頁(yè)面。
 this.$router.push({name:'page2',params:{id:1}});//類似post傳參

新頁(yè)面接收參數(shù)

this.$route.params.id

注意：在頁(yè)面進(jìn)行刷新的時(shí)候經(jīng)常會(huì)遇到參數(shù)變了，但是新頁(yè)面接受的參數(shù)沒(méi)有變化。這種問(wèn)題可以通過(guò)加watch解決。

watch: {
      '$route'(to, from){
        //在這里重新刷新一下
        this.getParams();
      }
    }

總結(jié)

到此這篇關(guān)于vue中組件＜router-view＞使用方法的文章就介紹到這了,更多相關(guān)vue中＜router-view＞使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論