页面组件渲染小组件（重点）

页面组件渲染小组件（重点）

页面组件作为父组件：views/*.vue

<template>
    <div class="home">
        <!-- vue项目下的html是支持大小写，且区分大小写 -->
        <Nav />
    </div>
</template>

<script>
    // 父组件加载子组件：父组件通常是页面组件，是被一个个小组件这些子组件组装成的页面
    // 1）导入语法要在 export default{} 之上完成
    // 2）@符合表示 项目src文件夹 绝对路径
    // 3）要在export default{} 的括号中用 components 注册
    // 4）在该组件的模板中就可以渲染子组件了(html代码中是区别大小写的)
    // 5）步骤：i）导入子组件 ii）注册子组件 iii）使用子组件
    import Nav from '@/components/Nav'

    export default {
        components: {
            Nav,
        }
    }
</script>

<style scoped>
    .home {
        width: 100vw;
        height: 100vh;
        background-color: orange;
    }
</style>

导航栏小组件(封装路由跳转)：components/*.vue

<template>
    <div class="nav">
        <img src="" />
        <ul>
            <li>
                <!-- router控制的路由，不是用a标签完成跳转：
                    1）a标签会刷新页面，错误的
                    2）router-link标签也能完成跳转，且不会刷新页面，就是router提供的a标签(最终会被解析为a标签，还是用a来控制样式)
                    3）router-link标签的to属性控制跳转路径，由两种方式
                        i) to="路径字符串"
                        ii :to="{name: '路由名'}"
                -->
                <a href="/">主页</a>
            </li>
            <li>
                <router-link to="/about">关于页</router-link>
            </li>
            <li>
                <!-- to="字符串"，v-bind:to="变量"，可以简写为 :to="变量" -->
                <router-link :to="{name: 'First'}">第一页</router-link>
            </li>
        </ul>
    </div>
</template>

<style scoped>
    .nav {
        width: 100%;
        height: 80px;
        background: rgba(0, 0, 0, 0.3);
    }
    img {
        width: 200px;
        height: 80px;
        background: tan;
        float: left;
    }
    ul {
        float: left;
        list-style: none;
        margin: 0;
        padding: 0;
        height: 80px;
        background: pink;
    }
    ul li {
        float: left;
        height: 80px;
        padding: 30px 20px 0;
    }
    a {
        color: black;
    }
</style>