router-view和component :is的區別

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

router-view

router-view是vueRouter的組件，主要是更新路由，可以不用跳轉到一個新的頁面，不會更新初始化函數mounted和created，只更新<router-view></router-view>標籤下所渲染的組件。可以不用引入組件。

缺點

一個頁面一個路由，跳轉要寫路由地址，更新tab樣式要傳參數

 

component :is=" "

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

缺點

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

 

 

router-view用法

直接填寫跳轉路由，路由組件會渲染<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=要渲染的組件，必須引用和聲明

 

在標籤頁的使用場景中用動態組件和路由的區別是什麼呢

沒什麼不同吧，都是動態渲染組件，只是路由封裝了url與展示的組件的關係，並可以切換任意多級抄組件，你用動態組件做的話肯定特別麻煩。
所以動態組件適用於一個頁面上某個區域的切zhidao換，路由適用於同時切換頁面以及多個層級的組件

 

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