路由嵌套和參數傳遞

<div id="itany">
    <div>
        <router-link to="/home">主頁</router-link>
        <router-link to="/user">用戶</router-link>
    </div>
    <div>
        <transition enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight">
            <router-view></router-view>
        </transition>
    </div>

    <hr>
    <button @click="push">添加路由</button>
    <button @click="replace">替換路由</button>
</div>

<template id="user">
    <div>
        <h3>用戶信息</h3>
        <ul>
            <router-link to="/user/login?name=tom&pwd=123" tag="li">用戶登陸</router-link>
            <router-link to="/user/regist/alice/456" tag="li">用戶注冊</router-link>
        </ul>
        <router-view></router-view>
    </div>
</template>

<script>
    var Home={
        template:'<h3>我是主頁</h3>'
    }
    var User={
        template:'#user'
    }
    var Login={
        template:'<h4>用戶登陸。。。獲取參數：{{$route.query}},{{$route.path}}</h4>'
    }
    var Regist={
        template:'<h4>用戶注冊。。。獲取參數：{{$route.params}},{{$route.path}}</h4>'
    }

    const routes=[
        {
            path:'/home',
            component:Home
        },
        {
            path:'/user',
            component:User,
            children:[
                {
                    path:'login',
                    component:Login
                },
                {
                    path:'regist/:username/:password',
                    component:Regist
                }
            ]
        },
        {
            path:'*',
            redirect:'/home'
        }
    ]

    const router=new VueRouter({
        routes, //簡寫，相當於routes:routes
        linkActiveClass:'active' //更新活動鏈接的class類名
    });

    new Vue({
        el:'#itany',
        router, //注入路由
        methods:{
            push(){
                router.push({path:'home'}); //添加路由，切換路由
            },
            replace(){
                router.replace({path:'user'}); //替換路由，沒有歷史記錄
            }
        }
    });
</script>
</body>