Vue动态路由

1.、动态匹配路由的基本用法

应用场景：通过动态路由参数的模式进行路由匹配

var router = new VueRouter({
    routers:[
        //动态路径参数 以冒号开头
        {
            path:'/path/:id'
            component:User
        }
    ]
})

const User = {
    //路由组件中通过$route.params.id获取路由参数
    template:'<div>User{{$route.params.id}}</div>'
}

2、路由组件传递参数

$route与对应路由形成高度耦合，不够灵活，所以可以使用props将组件和路由解耦

2.1、props的值为布尔类型

  const router = new VueRouter({
    routes: [
      // 如果 props 被设置为 true，route.params 将会被设置为组件属性
      { path: '/user/:id', component: User, props: true }
    ]
  })

  const User = {
    props: ['id'], // 使用 props 接收路由参数
    template: '<div>用户ID：{{ id }}</div>'  // 使用路由参数
  }

2.2、props的值为对象类型

  const router = new VueRouter({
    routes: [
      // 如果 props 是一个对象，它会被按原样设置为组件属性
      { path: '/user/:id', component: User, props: { uname: 'lisi', age: 12 }}
    ]
  })

  const User = {
    props: ['uname', 'age'],
    template: ‘<div>用户信息：{{ uname + '---' + age}}</div>'
  }

 2.3、props的值为函数类型

  const router = new VueRouter({
    routes: [
      // 如果 props 是一个函数，则这个函数接收 route 对象为自己的形参
      { path: '/user/:id', 
        component: User, 
        props: route => ({ uname: 'zs', age: 20, id: route.params.id })}
    ]
  })

  const User = {
    props: ['uname', 'age', 'id'],
    template: ‘<div>用户信息：{{ uname + '---' + age + '---' + id}}</div>'
  }