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

到此这篇关于Vue中router-view和component :is的区别的文章就介绍到这了,更多相关router-view和component :is区别内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论