vue-router 案例（入门篇）

2022-10-21 09:37:53

学前了解：

  <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->

思路：

1.定义（路由组件）

定义路由

每一个路由映射一个组件。其中"compoenet"可以是通过Vue.extend()创建组件构造器，或者只是一个组件配置对象

3.创建router 实例,然后传`routers`配置

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/vue_2.5.22.js"></script>
    <script src="./lib/vue-router_3.0.2.js"></script>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    body,
    html,
    .app {
        height: 100%;
    }

    .tab {
        position: fixed;
        width: 100%;
        height: 44px;
        bottom: 0;
        background-color: red;
        color: pink;
        border: 1px solid pink;
        display: flex;
        justify-content: space-around;

    }

    .home {
        background-color: blue;
        height: 100%;
        color: cornsilk;
    }

    .user {
        background-color: pink;
        height: 100%;
        color: cornsilk;
    }

    .cart {
        background-color: purple;
        height: 100%;
        color: cornsilk;
    }

    .tab a {
        text-decoration: none;
        color: #fff;
        line-height: 44px;
        border: 1px solid red;
    }
</style>

<body>

    <div class="app">
        <div class="tab">

            <router-link to="/home"> 首页页面 </router-link>
            <router-link to="/user"> 个人 中心</router-link>
            <router-link to="/cart"> 购物车 </router-link>
        </div>


        <!-- 路由出口 -->
        <!-- 路由匹配到组件将渲染到这里 -->
        <router-view></router-view>

    </div>





    <script>
        //1.定义（路由组件）
        let Home = {
            template: `
<div class="home">我是首页页面</div>

    `
        }

        let User = {
            template: `
    <div class="user">我是个人中心</div>

    `
        }

        let Cart = {
            template: `
    <div class="cart">我是购物车页面</div>

    `
        }


        //2.定义路由
        //每一个路由映射一个组件。其中"compoenet"可以是
        // 通过Vue.extend()创建组件构造器
        // 或者只是一个组件配置对象

        const routesA = [

            { path: "/home", component: Home },
            { path: "/user", component: User },
            { path: "/cart", component: Cart }
        ]


        //创建router 实例,然后传`routers`配置
        const router = new VueRouter({
            routes: routesA,
            molde: " hash"
        })






        //固定写法
        let app = new Vue({
            el: ".app",
            data: {},
            router,
        })



    </script>











</body>

</html>