快捷導(dǎo)航

Vue中router-view和component :is的區(qū)別解析

更新時(shí)間：2023年10月19日 11:09:37 作者：xueyue616

這篇文章主要介紹了Vue中router-view和component :is的區(qū)別解析,router-view用法直接填寫(xiě)跳轉(zhuǎn)路由,路由組件會(huì)渲染<router-view></router-view>標(biāo)簽,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下

他們的作用都是可以更換組件的顯示

router-view

router-view是vueRouter的組件，主要是更新路由，可以不用跳轉(zhuǎn)到一個(gè)新的頁(yè)面，不會(huì)更新初始化函數(shù)mounted和created，只更新<router-view></router-view>標(biāo)簽下所渲染的組件?？梢圆挥靡虢M件。

缺點(diǎn)

一個(gè)頁(yè)面一個(gè)路由，跳轉(zhuǎn)要寫(xiě)路由地址，更新tab樣式要傳參數(shù)

component :is=" "

component :is這個(gè)是vue的組件，is=要渲染的組件，不會(huì)更新路由，不會(huì)更新初始化函數(shù)mounted和created。刷新頁(yè)面后會(huì)跳回默認(rèn)顯示頁(yè)面；

缺點(diǎn)

需要引入所有要顯示的組件，并且components:{聲明}，

router-view用法

直接填寫(xiě)跳轉(zhuǎn)路由，路由組件會(huì)渲染<router-view></router-view>標(biāo)簽

//index.vue
<div class="searchNav">
            <router-link to="/a" >a</router-link>
            <router-link to="/b" >b</router-link>
            <router-view />
</div>
//a.vue
<template>
 <div>
   這是a文件
 </div>
<template>
//b.vue
<template>
 <div>
   這是b文件
 </div>
<template>

//router.js
{
  path: '/index',
  name: 'index',
  component:() => import('index.vue'),
  redirect: '/a', //重定向到/a
  children: [
    {
      path: '/a',
      name: 'a',
      component:() => import('a.vue'),
    },
    {
      path: '/b',
      name: 'b',
      component:() => import('b.vue'),
    },
}

component :is=" "用法

用法很簡(jiǎn)單，is=要渲染的組件，必須引用和聲明

在標(biāo)簽頁(yè)的使用場(chǎng)景中用動(dòng)態(tài)組件和路由的區(qū)別是什么呢

沒(méi)什么不同吧，都是動(dòng)態(tài)渲染組件，只是路由封裝了url與展示的組件的關(guān)系，并可以切換任意多級(jí)抄組件，你用動(dòng)態(tài)組件做的話肯定特別麻煩。
所以動(dòng)態(tài)組件適用于一個(gè)頁(yè)面上某個(gè)區(qū)域的切zhidao換，路由適用于同時(shí)切換頁(yè)面以及多個(gè)層級(jí)的組件

這個(gè)需要根據(jù)具體的業(yè)務(wù)需求來(lái)。
路由的改變百是根據(jù)URL的狀態(tài)改變而改變，所以要改變路由視圖必須要對(duì)應(yīng)URL的改變。并且路由的頁(yè)面必須要現(xiàn)在Routes里注冊(cè)，雖然后面提供了動(dòng)態(tài)的注冊(cè)router.addRouts()
而動(dòng)態(tài)組件<component :is="componentA" :prop="prop"> 僅僅是綁定了變化的度組件，當(dāng)然這些組件也必須在它們的父組件里注冊(cè)，也可以采用相同的方式進(jìn)行傳參與事件，頁(yè)面問(wèn)URL不需要發(fā)生改變。并且相對(duì)路由頁(yè)面更加靈活，可以根據(jù)自己的需要發(fā)生改變。
舉個(gè)栗子
在我以前寫(xiě)的一個(gè)項(xiàng)目中，設(shè)計(jì)到echarts的多個(gè)圖表變換，如果要用路由頁(yè)面，則答需要重復(fù)配置多條規(guī)則，而使用動(dòng)態(tài)組件，一個(gè)頁(yè)面內(nèi)就能搞定。并且能夠傳遞一些參數(shù)給這些子組件

到此這篇關(guān)于Vue中router-view和component :is的區(qū)別的文章就介紹到這了,更多相關(guān)router-view和component :is區(qū)別內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: