Vue2 VueRouter 动态路由 传参、获取、解耦

Question

设置路由参数

this.$route.query

使用 ? ​标记 查询参数

// 如果在路由中，使用 查询字符串给路由传递参数，则不需要修改 路由规则 的 path 属性
<router-link to="/login?id=10"></router-link>

new VueRouter({
    routes:[
        {
            path:'/login',
            component: login
        }
    ]
})

//login.vue
created(){
    console.log(this.$route.query.id)
}

this.$route.params

使用：标记 路由参数

<router-link to="/login/12/ls">登录</router-link>
<router-link to="/register">注册</router-link>

new VueRouter({
    routes:[
        {
            path:'/login/:id/:name',
            component: login
        },
        {
            path:'/register',
            component: register
        }
    ]
})

注意： 从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。因此组件的生命周期钩子不会再被调用 。

没有匹配到合适的子路由，如果你想要渲染点什么，可以提供一个空的子路由：

new VueRouter({
    routes:[
        {
            path:'/user/:id/:name',
            component: User,
            children:[
                // 当 /user/:id 匹配成功
                // UserHome 会被渲染在 User 组件 的<router-view>中
                {
                    path:'',
                    component:UserHome
                }
            ]
        }
    ]
})

获取路由

1. 通过 this.$route 访问当前路由
2. 在任何组件内通过 this.$router 访问路由器

路由解耦（重要)

使用 this.$route 会使之与其对应路由形成高度耦合，从而使得组件只能在某些特定的 URL 上使用，限制了灵活性。因此使用 props 将组件和路由解耦：

const User = {
    props: ['id'],
    template: '<div>User </div>'
}
const router = new VueRouter({
    routes:[
        {
            path:'/user/:id', 
            component: User, 
            props:true
        },

        // 对于包含命名视图的路由，必须分别为每个命名视图添加“props”选项
        {
            path:'/user/:id'
            components:{ 
                default:User, 
                sidebar:Sidebar
                },
                  props:{
                    default:true,
                      sidebar:false
                }
          }
      ]
})

• 如果 props 被设置为 true，route.params 将会被设置为组件属性
• 如果 props 是一个对象，它会被按原样设置为组件属性。当 props 是静态的时候有用

  const router = new VueRouter({
      routes:[
          { 
              path:'/promotion/from-newsletter',
              component:Promotion,
              props:{
                  newsletterPopup:false
              }
          }
      ]
  })
  

• props 是一个函数，将参数转换成另一种类型，将静态值与基于路由的值结合等等

  const router = new VueRouter({
      routes:[
          { 
              path:'/search',
              component:SearchUser,
               props:(route)=>({query:route.query.q})
          }
      ]
  })
  

URL /search?q=vue 会将 {query: 'vue'} 作为属性传递给 SearchUser 组件。请尽可能保持 props 函数为无状态的，因为它只会在路由发生变化时起作用。如果你需要状态来定义 props，请使用包装组件，这样 Vue 才可以对状态变化做出反应。

404 路由、捕获所有路径

• 路由 { path: '*' } 通常用于客户端 404 错误
• 当使用一个通配符时， $route.params 内会自动添加一个名为 pathMatch 参数。 它包含了 URL 通过通配符被匹配的部分 ：

  {
      //会匹配以 “/user-” 开头的任意路径
      path:'user-*'
  }
  this.$router.push('/user-admin')
  this.$route.params.pathMatch //'admin'
  
  {
      path:'*'
  }
  this.$router.push('/non-existing')
  this.$route.params.pathMatch //'/non-existing'