html中使用vue-router创建3个子路由，分别是“待付款”、“待发货”、“待收货”页面

<!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,

细水长流永不粹

3007人浏览 · 2021-11-24 20:47:54

细水长流永不粹 · 2021-11-24 20:47:54 发布

<!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" />
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="app">
        <router-view></router-view>
    </div>

</body>

<template id="home">
    <div>
        <router-link to="/daifukuang">待付款</router-link> |
        <router-link to="/daifahuo">待发货</router-link> |
        <router-link to="/daishouhuo">待收货</router-link>
        <router-view></router-view>
    </div>
</template>

<script>

    const Message = { template: '#home' }

    const Daifukuang = { template: '<div>待付款商品信息</div>' }

    const Daifahuo = { template: '<div>待发货商品信息</div>' }

    const Daishouhuo = { template: '<div>待收货商品信息</div>' }

    var router = new VueRouter({
        routes: [
            {
                path: '/',
                name: 'message',
                component: Message,
                children: [
                    {
                        path: '/daifukuang',
                        name: 'daifukuang',
                        component: Daifukuang,
                    },
                    {
                        path: '/daifahuo',
                        name: 'daifahuo',
                        component: Daifahuo,
                    },
                    {
                        path: '/daishouhuo',
                        name: 'daishouhuo',
                        component: Daishouhuo,
                    }
                ]
            }
        ]
    })

    var vm = new Vue({
        el: '#app',
        router
    })

</script>
</html>