vueRouter路由 知识点合集（二）

• 参数数拼接在url后面

// 路由定义
{
    
    
  path: '/describe/:id',
  name: 'Describe',
  component: Describe
}
// 页面传参
this.$router.push({
    
    
  path: `/describe/${
      
      id}`,
})
// 页面获取
this.$route.params.id

• 编程式路由导航 params传参 参数不会拼接在路由后面,页面刷新参数会丢失

// 路由定义
{
    
    
  path: '/describe',
  name: 'Describe',
  omponent: Describe
}
// 页面传参
this.$router.push({
    
    
  name: 'Describe',
  params: {
    
    
    id: id
  }
})
// 页面获取
this.$route.params.id

• 编程式路由导航 query传参 参数数拼接在url后面

// 路由定义
{
    
    
  path: '/describe',
  name: 'Describe',
  component: Describe
}
// 页面传参
this.$router.push({
    
    
  path: '/describe',
    query: {
    
    
      id: id
  `}
)
// 页面获取
this.$route.query.id

• 路由参数解耦
  一般在组件内使用路由参数 大多数都是这样操作的

	export default {
    
    
    methods: {
    
    
        getParamsId() {
    
    
            return this.$route.params.id
        }
    }
}

在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。
正确的做法是通过 props 解耦

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

将路由的 props 属性设置为 true 后，组件内可通过 props 接收到 params 参数

export default {
    
    
    props: ['id'],
    methods: {
    
    
        getParamsId() {
    
    
            return this.id
        }
    }
}

另外你还可以通过函数模式来返回 props

const router = new VueRouter({
    
    
    routes: [{
    
    
        path: '/user/:id',
        component: User,
        props: (route) => ({
    
    
            id: route.query.id
        })
    }]
})