(六)vue-route以<router-link>(普通路由,命名路由)方式实现get传值,动态路由传值，重定向redirect的使用，路由别名

1：动态路由方式传值

(1)router.js里面挂在组件，以/:id/:no作为参数传递

import Details from './components/detail.vue'  //引入组件 routes:[ { path: '/Details/:id/:no', component: Details},  //将组件挂载到对应路径下面  // (命名路由，可以根据名称DetailsRoute实现跳转），alias定义别名,访问得时候可以把路径里面的Details换成n1或者n2一样可以访问 { path: '/Details/:id/:no', component: Details,name:"DetailsRoute",alias:["/n1/:id/:no","/n2/:id/:no"]}, ] (2)在其他vue页面以router-link的方式实现动态路由跳转 动态路由 动态路由传值 以别名的方式进行路由跳转，动态路由传值 命名路由以动态路由传值的方式跳转 2:get方式的传值 (1)router.js里面挂在组件 import getdetail from './components/getdetail.vue'  //引入组件 routes:[ //将组件挂载到对应路径下面 { path: '/getdetail', component: getdetail},   //命名路由，可以根据名称DetailsRoute实现跳转,,alias定义别名,访问得时候可以把路径里面的Details换成n1或者n2一样可以访问 { path: '/getnameto', component: getnameto,name:"getnameroute",alias:["/n3","/n4"]},  ] (2)在其他vue页面以router-link的方式实现动态路由跳转 get传值 get传值 以别名的方式进行路由跳转，get传值 命名路由以get传值的方式跳转> 3：router.js里面，重定向redirect的使用 routes:[   { path: '', redirect:"/home" },//路由重定项,类似呢种(http://localhost:8080/),当什么都不输入的时候就跳转到/home路径下面去   { path: '/home', component: Home}, ] 4：接收页接收参数 (1)如果是get传参过来的,用this.$route.query.id方式获取传过来的参数 export default {   name:  'GetDetailFrom',   props: {
  },mounted(){//页面加载完后执行得钩子事件     alert(this.$route.query.id)      alert(this.$route.query.no)   } }; (2)如果是动态路由传参过来的,用this.$route.params.id方式获取传过来的参数 export default {   name:  'DetailFrom',   props: {
  },mounted(){//页面加载完后执行得钩子事件     alert(this.$route.params.id)      alert(this.$route.params.no)   } };