Vue 动态路由

动态路由使用场景：由数据动态生成的列表，如新闻列表、问题列表、论坛标题列表等，它们拥有的数量很多，可能由成百上千条，如果一个一个添加路由信息是不可能实现的，这时候就用到了动态路由:设置一个路由信息，可传递不同的ID值，根据每个不同的ID值获取相应的数据生成不同的显示页面。
使用方法：
1.创建一个组件，如：Question.vue
2.配置router，在router文件中添加路由信息，如：

{
  path:'/question/:id',  		 // 和普通路由区别在于此处设置可以进行传入ID
  name:'question',
  component:() => import ('./views/Question.vue')
}

3.引入使用：当跳转至该路由时需要传递值进去，此处使用了一个跳转按钮进行示例，如下面：

<router-link 
            tag="li"
            :to="{name:'question',params:{id:question.questionId}}"  // 设置该行属性 重点 
             v-for="question in questionList" 
            :key="question.questionID"> {{question.title}}
</router-link>

4.页面在跳转挂载时需要接收传递进来的值并根据值进行数据获取

mounted() {		//在组件挂载生命周期函数中操作
    const id = this.$route.params.id;      	// 获取ID值
    this.getData(id);				// 通过ID获取数据
}

5.通过上面方式即可实现从跳转传值到挂载取值渲染的过程，但是如果已在当前页面，然后进行比如上翻页下翻页等操作时，由于其已经在此页面且该页面也并不会重新进行构建，所以此时触发不了mounted函数，即无法再取到id值进行重新渲染页面，此时可以使用组件守卫beforeRouteUpdate来获取值并进行操作，如下：

beforeRouteUpdate(to, from, next) {
	const id = to.params.id;          	   // 使用to方法获取ID
 	this.getData(id);
 	next()				   // next执行不能忘记
}

上面示例是通过router-link跳转标签进行跳转的，如果通过点击事件跳转可以使用this.$router.push({ name: “question”, params: { id: id } })方式进行跳转；注意此时不刷新页面不会触发mounted