快捷導(dǎo)航

vue中組件＜router-view＞使用方法詳解

更新時間：2024年06月13日 10:07:36 作者：深度學(xué)習(xí)研究員

這篇文章主要給大家介紹了關(guān)于vue中組件＜router-view＞使用方法的相關(guān)資料,Vue 路由中的 <router-view/> 是用來承載當(dāng)前級別下的子級路由的一個視圖標(biāo)簽,此標(biāo)簽的作用就是顯示當(dāng)前路由級別下一級的頁面,需要的朋友可以參考下

前言

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

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

基本使用：

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

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

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

嵌套路由：

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

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

命名視圖：

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

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

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

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

動態(tài)組件：

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

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

在模板中：

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

過渡效果：

如果你希望在切換路由時添加過渡效果，可以在 <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>

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

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

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

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

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

1.get方式

頁面跳轉(zhuǎn)

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

新頁面接收參數(shù)

this.$route.query.id

2.post方式

頁面跳轉(zhuǎn)

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

新頁面接收參數(shù)

this.$route.params.id

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

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

總結(jié)

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

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

vue中組件＜router-view＞使用方法詳解

目錄

前言

基本使用：

嵌套路由：

命名視圖：

動態(tài)組件：

過渡效果：

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

1.get方式

2.post方式

總結(jié)

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具