1.命名视图
1.1 不命名是什么成果：
<template> <div id="app"> <div class="header"> <div class="nav"> <div class="left-title" @click="handleClick">集体博客</div> <div class="right-nav"> <router-link to="/">首页</router-link> <router-link to="/article">文章</router-link> <router-link to="/hot">近期热门</router-link> <router-link to="/hy">行业相干</router-link> <router-link to="/new">最新公布</router-link> <router-link to="/about">对于</router-link> </div> </div> </div> <div class="container"> <router-view /> <router-view /> <router-view /> </div> </div></template>看看后果：
为什么会这样？因为三个路由视图渲染的是同一个组件。
1.2 命名视图怎么用：
router.js：
{ path: '/', components: { default: Home, haveName: () => import("../components/haveName.vue"), },},app.vue：
<template> <div id="app"> <div class="header"> <div class="nav"> <div class="left-title" @click="handleClick">集体博客</div> <div class="right-nav"> <router-link to="/">首页</router-link> <router-link to="/article">文章</router-link> <router-link to="/hot">近期热门</router-link> <router-link to="/hy">行业相干</router-link> <router-link to="/new">最新公布</router-link> <router-link to="/about">对于</router-link> </div> </div> </div> <div class="container"> <router-view /> <router-view name="haveName" /> </div> </div></template>成果：
值得注意的是这里必须应用复数模式：
总结
须要应用命名视图的场景并不多，但须要用到的时候要会配！
Keep foolish, keep hungry.