1、router-link跳转

  1. //配置
  2. {
  3.   path: '/detail/:id',
  4.   name: 'detail',
  5.   component: () => import('../views/Detail.vue')
  6. }
  1. //不携带参数跳转
  2. <router-link to="/detail" tag="button">
  3.      跳转到detail
  4. </router-link>
  1. //携带参数跳转
  2. <router-link :to="'/detail/'+item.id" tag="button">
  3.      跳转到detail
  4. </router-link>
  1. //使用
  2. this.$route.params
  4. //在详情页使用
  5. mounted(){
  6.   var id = this.$route.params.id;
  7.   console.log(id)
  8.   this.axios.get(`v2/movie/subject/${id}`).then(res=>{    
  9.     console.log(res.data)
  10.     this.info = res.data;
  11.   })
  12. }
  13. tips：渲染页面直接用定义的数组获取数据，不需循环

2、命名路由

  1. //配置
  2. {
  3.     path: '/detail',
  4.     /* 命名路由 */
  5.     name: 'detail',
  6.     component: () => import('../views/Detail.vue')
  7. }

2-1、router-link,get

  1. <router-link :to="{name:'detail',query:{id:1213}}">detail</router-link>

2-2、router-link动态路由

  1. //配置动态路由
  2. {
  3.     path: '/detail/:id',
  4.     /* 命名路由 */
  5.     name: 'detail',
  6.     component: () => import('../views/Detail.vue')
  7.   }
  8.   //配置router-link
  9.  <router-link :to="{name:'detail',params:{id:1213}}">detail</router-link>

2-3、$router.push()

  1.  this.$router.push({name:"detail",params:{id:1314}})

2-4、props解耦id

  1. //配置路由
  2. {
  3.     path: '/detail/:id',
  4.     /* 命名路由 */
  5.     name:'detail',
  6.     component:() => import('../views/Detail.vue'),
  7.     //core code
  8.     props:true
  9.   }
  1. //Detail.vue
  2. export default {
  3.     props:['id'],
  4.     mounted(){
  5.         console.log(this.id)
  6.     }
  7. };