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

router-view

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

缺點

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

component :is=" "

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

缺點

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

router-view用法

直接填寫跳轉(zhuǎn)路由，路由組件會渲染<router-view></router-view>標簽

//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=" "用法

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

在標簽頁的使用場景中用動態(tài)組件和路由的區(qū)別是什么呢

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

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

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

最新評論