vue全家桶（2.5）

3.8.动态路由匹配和路由组件传参

3.8.1.动态路由匹配

动态路由意味着不固定，具有某种模式，我们希望通过某种匹配方式，把这种不固定的路由形势映射到同一个组件，例如：一个User组件，不同的ID表示不同的用户，即/user/1、/user/2、/user/3，这些不同用户所对应的路由，我们都希望用一个User组件来渲染。vue-router中提供了动态路径参数来实现这种需求，动态路径参数写法:

routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
  ]

这里的id类似于一个变量，id可以是1、2、3等具体的值

<template>
  <div class="page">
    <router-link  :to="'/user/'+item.id" v-for="(item, index) in userList" :key="index">{{item.username}}</router-link>
  </div>
</template>

<script type="text/javascript">
let userData = [
  {
    id: '1',
    username: 'nodeing1',
    level: 'vip1'
  },
  {
    id: '2',
    username: 'nodeing2',
    level: 'vip1'
  },
  {
    id: '3',
    username: 'nodeing3',
    level: 'vip2'
  },
  {
    id: '4',
    username: 'nodeing4',
    level: 'vip3'
  }]
export default {
  data () {
    return {
      userList: userData
    }
  },
  components: {

  }
}
</script>

<style scoped>
a{
  display: inline-block;
  padding: 20px 60px;
  text-decoration: none;
}
</style>

路由配置：

routes: [
  {
    path: '/user/:id?',
    component: User
  }
]

如何监听/响应动态参数的变化？

方式1: 使用 beforeRouteUpdate 钩子函数

<template>
  <div class="page">
    <router-link  :to="'/user/'+item.id" v-for="(item, index) in userList" :key="index">{{item.username}}</router-link>
    <hr>
    <h3>用户名: {{userInfo.username}}</h3>
    <h3>会员级别: {{userInfo.level}}</h3>
    <h3>id: {{userInfo.id}}</h3>
  </div>
</template>

<script type="text/javascript">
let userData = [
  {
    id: '1',
    username: 'nodeing1',
    level: 'vip1'
  },
  {
    id: '2',
    username: 'nodeing2',
    level: 'vip1'
  },
  {
    id: '3',
    username: 'nodeing3',
    level: 'vip2'
  },
  {
    id: '4',
    username: 'nodeing4',
    level: 'vip3'
  }]
export default {
  data () {
    return {
      userList: userData,
      userInfo: {}
    }
  },
  components: {

  },
  beforeRouteUpdate (to, from, next) {
    this.userInfo = this.userList.filter((item) => to.params.id === item.id)[0]
  }
}
</script>

<style scoped>
a{
  display: inline-block;
  padding: 20px 60px;
  text-decoration: none;
}
</style>

方式2: 在组件中对 $route 进行 watch（监听）

watch: {
  $route () {
    console.log(this.$route)
  }
}

路由信息对象$route

path   对应当前路由的路径
params  保护动态路由参数
query   url查询参数
hash     当前路由的hash值
fullPath  完整的url路径，包含查询参数和hash
matched  包含当前路由的所有嵌套路径片段的路由记录
name     当前路由的名称

3.8.2.路由组件传参

在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性,我们需要做的是通过传参将组件与路由解耦，使得组件的使用更加灵活，这里需要使用到props

路由配置里面我们需要改成这样

routes: [
  {
    path: '/user/:id?',
    component: User,
    props: true
  }
]

在组件中使用props的值

<template>
  <div class="page">
    <router-link  :to="'/user/'+item.id" v-for="(item, index) in userList" :key="index">{{item.username}}</router-link>
    <hr>
    <button @click="fn">显示信息</button>
    <h3>用户名: {{userInfo.username}}</h3>
    <h3>会员级别: {{userInfo.level}}</h3>
    <h3>id: {{userInfo.id}}</h3>
  </div>
</template>

<script type="text/javascript">
let userData = [
  {
    id: '1',
    username: 'nodeing1',
    level: 'vip1'
  },
  {
    id: '2',
    username: 'nodeing2',
    level: 'vip1'
  },
  {
    id: '3',
    username: 'nodeing3',
    level: 'vip2'
  },
  {
    id: '4',
    username: 'nodeing4',
    level: 'vip3'
  }]
export default {
  data () {
    return {
      userList: userData,
      userInfo: {}
    }
  },
  components: {

  },
  props: ['id'],
  methods: {
    fn () {
      let id = this.id
      this.userInfo = this.userList.filter((item) => id === item.id)[0]
      console.log(this.userInfo)
    }
  }
}
</script>

<style scoped>
a{
  display: inline-block;
  padding: 20px 60px;
  text-decoration: none;
}
</style>

螺钉课堂视频课程地址：http://edu.nodeing.com