vue 路由参数获取

原文链接: vue 路由参数获取

上一篇: vue 父子组件通讯

下一篇: vue 路由

参数分为查询参数和路径参数

<div id='myDiv' class="container">

    <div>
        <router-link to='/'>Home</router-link>
        <router-link to='/about'>About</router-link>
        <router-link to='/user/ahao/?age=18'>Ahao</router-link>
        <router-link to='/user/Lufu/more?age=16'>Lufu</router-link>
        <router-link to='/user/Ace/more'>Ace</router-link>
        <router-link to='/content'>Content</router-link>

    </div>

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

<script>
    //全局组件注册
    my_component = Vue.component('my_component', {
        template: '<h1>hello</h1>'
    })

    var routes = [
        {
            path: '/',
            component: {
                template: '<div><h1>Home</h1></div>'
            }
        },
        {
            path: '/content',
            component: my_component
        },
        {
            path: '/about',
            component: {
                template: '<div><h1>About</h1></div>'
            }
        },
        {
            path: '/user/:name',
            component: {

                //普通参数获取和查询参数获取
                template: `
                <div>
                <h1>
                User:{{$route.params.name}}
                age:{{$route.query.age}}
                </h1>

                </div>
                    `
            },


        },
    ]

    var router = new VueRouter({
        routes: routes,
    })
    var myDiv = new Vue({
        el: "#myDiv",
        router: router,
    })
</script>