路由的传参

路由的传参：
1.查询字符串：
/user/regist?uname=jack&upwd=123
接收：
{{$route.query}}

2.rest风格传参
/user/login/rose/456
练习

<div id="app">
    <router-link to="/home">首页</router-link>
    <router-link to="/user">用户页</router-link>
    <router-view></router-view>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script>

<script>
    var home={
        template:`
        <h1>我是首页</h1>
        `
    }
    var user={
        template:`

         <div>
            <h1>我是用户页</h1>
            <ul>
                <li><router-link to="/user/denglu?y=jieke&m=123456">登录</router-link></li>
                <li><router-link to="/user/zhuce/jieke/123456">注册</router-link></li>
            </ul>
            <router-view></router-view>
         </div>
        `
    }
    var denglu={
        template:`
         <div>
            账号<input type="text">
            密码<input type="text">
            <button>登录</button>
            <span>{{$route.query}}</span>
            <span>用户名:{{$route.query.y}}</span>
            <span>密码:{{$route.query.m}}</span>
         </div>
        `
    }
    var zhuce={
        template:`
         <div>
            账号<input type="text">
            密码<input type="text">
            确认密码<input type="text">
            <button>注册</button>
            <span>{{$route.params}}</span>
            <span>用户名:{{$route.params.y}}</span>
            <span>密码:{{$route.params.m}}</span>
         </div>
        `
    }
    const luyou=[
        {path:'/',component:home},
        {path:'/home',component:home},
        {path:'/user',
            component:user,
            children:[
                {path:'denglu',component:denglu},
                {path:'zhuce/:y/:m',component:zhuce}
            ]

        }
    ]

    const router=new VueRouter({
        routes:luyou/*,
        linkActiveClass:'active'*/
    })
    new Vue({
        el:'#app',
        router:router
    })
</script>