1. 程式人生 > >vue之路由嵌套,子路由

vue之路由嵌套,子路由

scrip 用戶註冊 r.js itl ren 註冊 div routes let

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <script src="js/vue.js"></script>
    <script src="js/vue-router.js"></script>
    <title>Title</title>
</head>
<body>

<div id="app">
    <router-link to="/home">主頁</router-link>
    <router-link to="/user">用戶</router-link>

    <router-view></router-view>
</div>

<template id="user">
    <div>
        <h1>用戶信息</h1>
        <ul>
            <li><router-link to="/user/regist">用戶註冊</router-link></li>
            <li><router-link to="/user/login">用戶登錄</router-link></li>
        </ul>

        <router-view></router-view>
    </div>




</template>

</body>


<script>
    var home={
        template:'<h1>home</h1>'
    };
    var user={
        template:'#user'
    };

    let login={
        template:'<h1>登錄中....</h1>'
    };
    let regist={
        template:"<h1>註冊</h1>"
    }
    const routes1=[
        {path:'/home',component:home},
        {path:'/user',component:user,
        children:[
            {
            path: 'login',
            component: login,
            },
            {
             path:'regist',
             component:regist
            }
        ]},
        // {path:'*',redirect:'/home'}
    ];
    const router = new VueRouter({
        routes:routes1,
    });
    new Vue({
        el:'#app',
        router
    })
</script>



</html>

vue之路由嵌套,子路由