Vue中对动态路由的理解，定义以及如何获取传递过来的动态参数

一、动态路由的理解
动态路由 就是把匹配某种模式下的路由映射到同一个组件中，其实本质就是通过url进行传参，比如说:有一个商Goods的组件，我们需要让不同的商品id都映射到这个组件中，此时就，需要用到动态路由了。
二、动态路由的配置
可以通过两种方式来传递动态参数
1.params
2.query
以上代码的演示都是在history的路由模式下
params方式 传参
配置路由的方式，使用冒号：绑定动态参数
//index.js中配置路由信息
const routes=[{
path:'/godds/:id'，
components:Goods
}]
路由跳转是，分为：
1.使用router-link方式实现路由跳转
此种方式下，一可以使用字符串，在路径后面直接跟上你对应的值，如：
App.vue

点击查看代码

 <template>
    <div id="app">
	<router-link :to='/goods/'+id">商品</router-link>
	<router-view/>
	</div>
   </template>
   <script>
   export default{
     name:'App',
	 data(){
	 return {
	 id:'001'
	 }
	 }
   }
   </script>

二、可以使用对象的方式，如：  注意： 1.params 方法中，to属性使用对象的方式，必须由name属性引入路由，不能用path. 2.params方法传参时，属性名必须跟配置路由时的动态参数名一致，否则报错 使用$router的方式进行路由 的跳转 方法一1， this.$router.push('/goods/'+this.goodsId) 方法2， this.$router.push({ name：'goods', params:{ id:this.goodsId } }) }) params方式的传参，对应的传参后的url地址如下所示 localhost:8080/goods/001 获取参数的方式 $router.params.如本例中想要获取id的值，对应代码为 $router.params.id query方式的传参 配置路由时，普通配置即可，即原来怎么配置路由，现在就怎么配置路由， const routes=[{ path:'/goods', name:'goods' component:Goods }] 路由挑转时，分为 1.使用router-link方式实现路由跳转 query传参的方式只可以通过对象，不可以使用字符传 商品 2.使用$router的方式进行路由的跳转 this.$router.push({ path:'/goods', query:{ id:this.goodsId } })

 this.$router.push({
 path:'goods',
 query:{
 id:this.goodsId
 }
 })
 query方式的传参，赌赢传参后的url地址显示为
 localhost:8080/goods?id=001
 
 注意：query方式的传参，query对象里面的属性名可以随便起名，不像params方式传参时受限
 同时，此种方式下路由的引入既可以使用path属性，也可以使用name属性
 获取参数的方式
 $router.query.如本例中想要获取 id值
 $route.query.id
 
 总之，千万要注意：

（1）、params方式路由的引入只能用name，query方式路由的引入可以用name和path。
（2）、路由跳转使用 “router”；获取参数使用“route”