master

分支 (1)

管理

管理

master

vue_stu
/
30-vue-router-table.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script src="node_modules/vue-router/dist/vue-router.min.js"></script>
    <style>
        .msg_detail {
            background: rgb(62, 131, 179);
            width: 308px;
            border: 1px black solid;
            text-align: center;
            height: 200px;
        }

        .msg_detail > a {
            width: 98px;
            display: inline-block;
            height: 30px;
            background: white;
            text-decoration: none;
            line-height: 30px;
            margin-top: 2px;
        }

        div > h2 {
            margin-top: 60px;
        }
    </style>
</head>
<body>
<div id="app">
    <!--    <router-link to="/msg" tag="h2">发货信息</router-link>-->
    <!--使用命名路由方式-->
    <router-link :to="{name:'msg'}" tag="h2">发货信息</router-link>
    <router-view></router-view>
</div>
<template id="msg_detail">
    <div class="msg_detail">
        <router-link to="/msg/wait_pay">待付款</router-link>
        <router-link to="/msg/wait_send">待发货</router-link>
        <router-link to="/msg/wait_get">待收货</router-link>
        <router-view></router-view>
    </div>
</template>
<template id="wait_pay">
    <div>
        <h2>待付款商品信息</h2>
    </div>
</template>
<template id="wait_send">
    <div>
        <h2>待发货商品信息</h2>
    </div>
</template>
<template id="wait_get">
    <div>
        <h2>待收货商品信息</h2>
    </div>
</template>
<script>
    let msg = {
        template: '#msg_detail'
    }
    const wait_send = {
        template: '#wait_send'
    }
    const wait_get = {
        template: '#wait_get'
    }
    const wait_pay = {
        template: '#wait_pay'
    }
    var router = new VueRouter({
        routes: [
            {path: '/', redirect: '/msg'},
            {
                path: '/msg',
                component: msg,
                name: 'msg',    //由于使用命名路由所以要在路由规则中添加name
                children: [
                    {path: 'wait_pay', component: wait_pay},
                    {path: 'wait_send', component: wait_send},
                    {path: 'wait_get', component: wait_get}
                ]
            }
        ]
    })
    var vue = new Vue({
        el: "#app",
        router


    })
</script>

</body>
</html>