路由嵌套和参数传递

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