3.9 动态组件-数据驱动视图
这里有一个情景是，我们模拟一个APP，里面有top、banner、container、footer四个组件，banner假设是“广告”。如果是会员的话， 就会看不到这个banner，而普通用户就会看得到广告。
我们先在components中写出四个组件来里面随便写点就行，并且引入到App.vue：
<!-- Top.vue -->
<template>
<h1>my top</h1>
</template>
<style scoped>
h1{
border:1px solid #000000;
height:100px;
}
</style>
<!-- Banner.vue -->
<template>
<h1>my banner</h1>
</template>
<style scoped>
h1{
border:1px solid #000000;
height:100px;
}
</style>
<!-- Footer.vue -->
<template>
<h1>my footer</h1>
</template>
<style scoped>
h1{
border:1px solid #000000;
height:100px;
}
</style>
<!-- Container.vue -->
<template>
<h1>my container</h1>
</template>
<style scoped>
h1{
border:1px solid #000000;
height:100px;
}
</style>
接下来这一步呢，是要用动态组件<component> 来实现显示刚才的那些组件：
<!-- <component>里面有一个v-bind:is属性，用来绑定变量，变量是组件的名字 -->
<template>
<!-- 注意双引号里面还有一个单引号，必须是字符串 -->
<component :is="'Top'" />
<component :is="'Banner'" />
<component :is="'Footer'" />
<component :is="'Container'" />
</template>
<script>
import MyTop from './components/Top.vue'
export default {
components:{
Top,
Banner,
Footer,
Container
},
}
</script>
当然我们会发现这样写有些麻烦，很多重复，所以我们可以有用数组list+v-for来实现简便写法：
<template>
<!-- 如果你这里用v-for出现了红色波浪线提示，我下面会帮忙解决 -->
<component v-for="item in list" :is="item" />
</template>
<script>
import MyTop from './components/Top.vue'
export default {
components:{
Top,
Banner,
Footer,
Container
},
data(){
return{
list:['Top','Banner','Footer','Container']
}
}
}
</script>
vue项目，标签中使用v-for出现红色波浪线报错，这种情况下我们点击设置-文本编辑器-字体，找到我标红的这个VSCode编译器的设置文件：
点进去之后，加上一行代码，然后把原本报错的文件关掉 重新点开就行了：
"vetur.validation.template": false
姜姜姜蒋~那么我们的原始期望是vip看到的是vip的专属界面，也就是我们只需要修改list的数据，就可以让vip看到不一样的界面了。
3.10 路由基础-页面跳转
首先呢，要在我们的项目里安装vue-router,因为vue3用的是4版本的vue-router，所以这样安装cnpm install --save vue-router@4。
继续来假设场景，场景是在页面上方有两个文字“首页”、“博客”。点击他们后页面下方会分别展示对应的组件。在App.vue中，用vue-router提供的<router-link>标签来实现页面跳转：
<template>
<router-link to="/">首页</router-link> | <router-link to="/blog">博客</router-link>
<router-view></router-view>
</template>
router-link：点击会切换router-view中显示的组件。浏览器上方会显示的路径就是to的路径，通常首页都是"/"。
那我们得先创建两个要用来展示的组件，随便写两个就行Home.vue/Blog.vue：
<!-- Home.vue -->
<template>
<h1>首页组件</h1>
</template>
<!-- Blog.vue -->
<template>
<h1>博客组件</h1>
</template>
接着我们写一个router工具：(创建一个router.js文件)
import {createRouter,} from 'vue-router'
const router = createRouter({ //配置router
history:createWebHashHistory(),
routes:[
{path:"/",component:Home}, //path指路径，component指组件
{path:'/blog',component:Blog}
]
})
export default router //把router暴露出去
然后需要让vue的应用，把router引进去。那我们就要到main.js中：
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
//原理：下面createApp会创建一个Vue的应用，我们要让这个Vue应用来使用router
createApp(App).mount('#app')
进行改下如下：
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import router from './utils/router'
const app = createApp(App)
app.use(router) //使用router
app.mount('#app')
这样就完成辽点击跳转效果。
3.10.1 路由传参(动态路由)
我们上面学习的是属于，有公共菜单的页面切换，首页和博客两个词永远是在的，这里呢我想实现是一个博客列表的页面，就是在页面中有很多条博客的预览条，点击任意一条博客之后，整个页面会跳转到这个博客的真正位置。
既然没有公共部分，那么App.vue里面就只能有<router-view>不能有<router-link>。这样才能实现整页的切换。
<template>
<router-view></router-view>
</template>
我们把Home组件改改，Home就是首页，应该展示的是一个列表里面有许多博客的概述：
<!-- Home.vue -->
<template>
<h1>列表</h1>
<ul>
<li v-for="item in blogList">
<!-- 注意这里的传参，这样子传过去的就会是 /blog/id，区分每个博客 -->
<router-link :to="'/blog/'+item.id">{{item.title}}</router-link>
</li>
</ul>
</template>
<script>
export default {
data() {
return {
blogList:[ //工作中，这些数据应该从后台来，这里就模拟一下
{id:1,title:'博客1'},
{id:2,title:'博客2'},
{id:3,title:'博客3'},
]
}
},
}
</script>
<!-- Blog.vue -->
<template>
<!-- 通过$route.params. 来拿到我们传过来的数据，上面我们Home传过来的是id -->
<h1>博客详情：{{$route.params.id}}</h1>
</template>
当然这样还不够，因为我们改了页面的地址变成 /blog/id了，所以我们在router.js文件里也要更改：
const router = createRouter({
history:createWebHashHistory(),
routes:[
{path:"/",component:Home},
{path:'/blog/:id',component:Blog} //在这个路径后面加上 :id 接收即可
]
})
这样呢，进入不同的博客页面，就会显示不一样的页面了，一般来说到对应页面后 应该拿id去后台请求数据来放到页面上。那我们现在做到这一步就ok啦。拿数据的操作应该要放到生命周期钩子里！ 下一篇文章来使用所学基础实现登录功能。
