Vue中动态路由

（1）在router.js 中配置动态路由，注意：路径path后面加id就是动态添加值

路由：注意 :id 是个动态值

    {
      path: '/questions/:id',
      name: 'questions',
      component: Questions
    }

引入该路由：

//下面引入动态路由
import Questions from './components/Questions.vue'

（2）该路由在哪里使用？在Academic.vue组件中，尤其注意router-link标签中  :to 属性的写法，内部的 params属性是个对象

<template>
  <div class="academic">
    <ul>
      <router-link tag="li"
      v-for="item in questionList"
      :to="{name:'questions', params: {id: item.id}}"
      :key="item.id"
    >{{item.question}}</router-link>
    </ul>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      questionList: [
        {
          question: "什么时候才能瘦下来啊？",
          id: '001'
        },
        {
          question: "什么时候才能成为前端大佬？",
          id: '002'
        },
        {
          question: "什么时候才会成为大老板？",
          id: '003'
        },
        {
          question: "什么时候才能让狗子叫我一声大哥？",
          id: '004'
        },
        {
          question: "什么时候庞博才能瘦下来？",
          id: '005'
        }
      ]
    };
  }
};
</script>
<style>
  .academic ul li{
    text-decoration-line: underline;
    cursor: pointer;
    margin-bottom: 5px;
  }
</style>

（3）当点击这些动态路由时，根据id值，跳转到对应的页面（该页面是由同一个组件Questions.vue，该页面的布局基本上唯一）

如何根据id值加载对应的页面内容呢？来到Questions组件，我们通过生命周期函数created 来打印this，看看this是什么结果，有没有我们需要的关于路由的值。

<template>
<div>
  <h4>This is questions!</h4>
</div>

</template>

<script>
export default {
    data () {
      return {

      }
    },
    created () {
      console.log(this)
    }
}
</script>
<style scoped>

</style>

有个$router属性，是和路由相关的

那么我们就可以通过id值，从网络请求获取对应数据，对数据进行处理。