Vue利用 is 属性 实现页面异步路由切换

**在html中 很多语法都是固定的写法
比如 ul 里面只能是 li tr里面是td

而is的这个属性就是为了里面元素的复用跟开发便捷

is特性——就是有些元素内部不能使用自定义标签或者自定义标签内也不能放某些特殊的标签，这时候就要用is代替一下，让html语法符合规则验证。is属于指定要在内部使用的标签。
文档链接：https://cn.vuejs.org/v2/guide/components.html
好了不废话直接上代码

<template>
<div class="home">
<!-- 点击切换组件 -->
<button @click="onClick">点击切换组件</button>
<!-- 使用is动态组件切换 -->
<component :is="componentId"></component>
</div>
</template>

<script>
export default {
name: "Home",
components: {
// 按需引入组件
// 这是异步加载的，不是用就不会加载
FooShow(resolve){
require(["../components/Foo"],resolve)
},
BarShow(resolve){
require(["../components/Bar"],resolve)
}
},
data() {
return {
// is绑定的就是这个key值，这个value值是在components里面的组件名
componentId:"FooShow",
}
},
methods: {
onClick(){
// 这里切换的时候就会加载这个组件
this.componentId = "BarShow"
}
},
};
</script>

这里代码已经注释的很清楚了