vue.js_11_路由的2中参数传递和路由的嵌套

1.以？的形式传递参数 <router-link to="/login?id=10&name=zs">登录</router-link>

发送参数：<router-link to="/login?id=10&name=zs">登录</router-link>

接受参数：通过{{$route.query.id}}来获取

template: '<h1>登录 --- {{ $route.query.id }} --- {{ $route.query.name }}</h1>',

<body>

        <div id="app">

            <!-- 如果在路由中，使用 查询字符串，给路由传递参数，则 不需要修改 路由规则的 path 属性 -->

            <router-link to="/login?id=10&name=zs">登录</router-link>

            <router-link to="/register">注册</router-link>

            <router-view></router-view>

        </div>

        <script>

            var login = {

                template: '<h1>登录 --- {{ $route.query.id }} --- {{ $route.query.name }}</h1>',

                data() {

                    return {

                        msg: '123'

                    }

                },

            }

            var register = {

                template: '<h1>注册</h1>'

            }

            var router = new VueRouter({

                routes: [{

                        path: '/login',

                        component: login

                    },

                    {

                        path: '/register',

                        component: register

                    }

                ]

            })

            // 创建 Vue 实例，得到 ViewModel

            var vm = new Vue({

                el: '#app',

                data: {},

                methods: {},

                // router: router

                router

            });

        </script>

    </body>

2.使用params传递参数

发送参数：<router-link to="/login/10/hdh">登录</router-link>

获取参数：通过{{$route.params.id}}来获取

template: '<h1>登录---{{$route.params.id}}---{{$route.params.name}}</h1>',
路由的匹配需要通过占位符来 占位

{ path: '/login/:id/:name',

  component: login },

<body>

        <div id="app">

            <router-link to="/login/10/hdh">登录</router-link>

            <router-link to="/register">注册</router-link>

            <router-view></router-view>

        </div>

        <script>

            var login = {

                template: '<h1>登录---{{$route.params.id}}---{{$route.params.name}}</h1>',

                data() {

                    return {

                        msg: '123'

                    }

                },

            }

            var register = {

                template: '<h1>注册</h1>'

            }

            var router = new VueRouter({

                routes: [{

                        path: '/login/:id/:name',

                        component: login

                    },

                    {

                        path: '/register',

                        component: register

                    }

                ]

            })

            // 创建 Vue 实例，得到 ViewModel

            var vm = new Vue({

                el: '#app',

                data: {},

                methods: {},

                // router: router

                router

            });

        </script>

    </body>

3.路由的嵌套

在路由配置中通过关键字：children来设定路由的嵌套

　　var router = new VueRouter({
               routes: [{
                       path: '/account',
                       component: account,
                       //设置account的子路由
                       children: [{
                           path: 'login',
                           component: login
                       }, {
                           path: 'register',
                           component: register
                       }]
                   }
               ]

<body>

        <div id="app">

            <router-link to="/account">Account组件</router-link>

            <router-view></router-view>

        </div>

        <template id="tmpl">

            <div>

                <h1>这是 Account组件</h1>

                <router-link to="/account/login">登陆</router-link>

                <router-link to="/account/register">注册</router-link>

                <router-view></router-view>

            </div>

        </template>

        <script>

            var account = {

                template: '#tmpl'

            };

            var login = {

                template: '<h3>登陆</h3>'

            };

            var register = {

                template: '<h3>注册</h3>'

            };

            var router = new VueRouter({

                routes: [{

                        path: '/account',

                        component: account,

                        //account的子路由

                        children: [{

                            path: 'login',

                            component: login

                        }, {

                            path: 'register',

                            component: register

                        }]

                    }

                ]

            });

            var vm = new Vue({

                el: '#app',

                data: {},

                methods: {},

                router

            })

        </script>

    </body>