2302
/
index.html

<!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="./stage-3/day07/js/vue.js"></script>
    <script src="./stage-3/day07/js/vue-router.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        html {
            font-size: -webkit-calc(100vw / 7.5);
        }

        body {
            font-size: 0.24rem;
        }

        html,
        body,
        #app {
            width: 100%;
            height: 100%;
        }

        #app {
            display: flex;
            flex-direction: column;
            align-content: space-between;
        }

        #app .app-main {
            display: flex;
            flex-direction: column;
            align-content: space-between;
            flex: 1;
        }

        #app .app-header,
        #app .app-footer {
            height: 1rem;
            background-color: grey;
        }

        #app .app-content {
            flex: 1;
            overflow-y: auto;
        }

        #app .app-footer {
            display: flex;
            text-align: center;
            line-height: 1rem;
        }

        #app .app-footer a {
            flex: 1;
        }
    </style>
</head>

<body>
    <div id="app">

        <!-- <component :is="curCom"></component> -->
        <!-- 路由出口 -->
        <!-- 路由匹配到的组件将渲染在这里 -->
        <router-view></router-view>

        <div class="app-footer">
            <!-- 使用 router-link 组件来导航. -->
            <!-- 通过传入 `to` 属性指定链接. -->
            <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
            <router-link to="/">主页</router-link>
            <router-link to="/list">列表</router-link>
            <router-link to="/car">购物车</router-link>
            <router-link to="/mine">我的</router-link>
        </div>
    </div>
</body>
<script type="module">
    // 单页面应用  => 把所有的页面都注册为组件实例,然后在根组件及其子组件中使用

    // 路由: 对应不同的url地址展示不同的内容
    // 站点: 对应url地址显示不同的页面(站点展示)  页面路由
    // 后端路由:  接口  (向不同的url地址发送请求 => 返回不同的响应结果)

    // 前端路由:
    // history模式  => 写法麻烦()


    // hash模式  => 用hash值来记录访问的页面,模拟路径记录 => 实现路由切换    ( #one  #two  => 可以实现当前页面跳转)
    // 优点:
    // 1. 前后端交互时hash值不会传递给后端
    // 2. 修改hash值时当前页面不会刷新

    // 如何用hash值模拟路径
    // #/ 根路由
    // #/car  一级路由
    // #/car/info  二级路由

    console.log(VueRouter);
     // Vue应用中使用 Vue-router插件
    Vue.use(VueRouter);


    // 1. 引入组件配置
    import Home from "./stage-3/day07/components/home.js";
    import List from "./stage-3/day07/components/list.js";
    import Car from "./stage-3/day07/components/car.js";
    import Mine from "./stage-3/day07/components/mine.js";


    // 2. 定义路由(将路径和组件进行关联)
    // 每个路由应该映射一个组件。 其中"component" 可以是
    // 通过 Vue.extend() 创建的组件构造器，
    // 或者，只是一个组件配置对象。
    // 我们晚点再讨论嵌套路由。
    let routes = [{
        path: "/",  // 路由地址
        name: "home", // 组件名称
        component: Home,  // 组件配置
    }, {
        path: "/list",  // 路由地址
        name: "list", // 组件名称
        component: List,  // 组件配置
    }, {
        path: "/car",  // 路由地址
        name: "car", // 组件名称
        component: Car,  // 组件配置
    },
    {
        path: "/mine",  // 路由地址
        name: "mine", // 组件名称
        component: Mine,  // 组件配置
    }]

    // 3. 创建 router 实例，然后传 `routes` 配置
    // 你还可以传别的配置参数, 不过先这么简单着吧。
    var router = new VueRouter({
        routes: routes,
        mode: "hash",
        // mode:"history",
    });

    console.log("路由实例",router);

    // 4. 创建和挂载根实例。
    // 记得要通过 router 配置参数注入路由，
    // 从而让整个应用都有路由功能
    var vm = new Vue({
        el: "#app",
        data: {

        },
        router,
    })
</script>


</html>