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的多个图表变换，如果要用路由页面，则答需要重复配置多条规则，而使用动态组件，一个页面内就能搞定。并且能够传递一些参数给这些子组件