动态路由匹配的基本用法

1.通过$route.params.xx来获取路由参数

<router-link to="/user/1">user1</router-link>
<router-link to="/user/2">user2</router-link>
<router-link to="/user/3">user3</router-link>

 const User = {
            template: `
            <h1>USER组件 ID为{{$route.params.id}}<h1>
            `
        };
const router = new VueRouter({
            // 所有路由规则
            routes: [{
                // 使用 $route.params.id 传参
                path: '/user/:id',
                component: User
            }]
        })

2.通过props传参
#props的值为布尔类型

<router-link to="/register/xiaofen">register</router-link>

const Register = {
            props: ['name'],
            template: `
            <h3>register组件 {{name}}<h3>
            `
        };
const router = new VueRouter({
            // 所有路由规则
            routes: [ {
                // 使用 props 传参  需要在全局组件中使用props接收参数  在路由配置中 开启props传参 (props：true) 
                path: '/register/:name',
                component: Register,
                props: true
            }]
        })

#props的值为对象类型
props: {name:wanghao,age:18}
#props的值为函数类型
props: route=>({name:wanghao,age:18,id:$route.params.id})