(六)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的方式实现动态路由跳转

<router-link :to="`/Details/${index}`" class="astyle">动态路由</router-link>

<router-link to="/Details/3567/9988" class="astyle">动态路由传值</router-link>

<router-link to="/n1/3567/9988" class="astyle">以别名的方式进行路由跳转，动态路由传值</router-link>

<router-link:to="{ name: 'DetailsRoute', params: { id: '3322', no: '45' } }" class="astyle">命名路由以动态路由传值的方式跳转</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的方式实现动态路由跳转

<router-link :to="`/getdetail?id=${index}&no=${no}`" class="astyle">get传值</router-link>

<router-link :to="`/getdetail?id=11&no=22`" class="astyle">get传值</router-link>

<router-link :to="`/n3?id=11&no=22`" class="astyle">以别名的方式进行路由跳转，get传值</router-link>

<router-link :to="{ name: 'getnameroute', query: { id: '333', no: '43' } }"class="astyle">命名路由以get传值的方式跳转</router-link>

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)

  }

};