vue中路由嵌套及页面传参

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router, // 相当于 router: router, 在创建Vue实例的时候使用router属性为其创建一个路由
}).$mount('#app')

router.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './components/Home.vue'
import List from './components/List.vue'
import UC from './components/UserCenter.vue'
import C from './components/Cart.vue'
import HHY from './components/Happy.vue'
import LD from './components/LaoDi.vue'
import K from './components/K.vue'
import Detail from './components/movies/Detail.vue'

Vue.use(VueRouter); // 通过Vue.use全局使用组件

// 建议使用name进行跳转
const router = new VueRouter({
  // routes 表示路由配置信息,路由表
  routes: [{
    path: '/h', // 表示路由地址,此地址在浏览器中的地址栏中进行输入
    component: Home, // 路由地址对应的组件
    // 在做路由嵌套的时候可以使用children属性实现
    //  里面跟着一个数组
    children: [{
      path: '/user', // 此处的path如果加了/，name整个地址都会被替换
      component: UC,
      name: 'UC'
    }, {
      path: '/cart',
      component: C,
      name: 'C'
    }, {
      path: 'happy', // 此种path会在父路由path的后面拼接当前地址
      component: HHY,
      name: 'HHY', 
      children: [{
          path: 'laodi',
          component: LD,
          name: 'LD'
        }, {
          path: '98k',
          component: K,
          name: 'K'
        }
      ]
    }]
  }, {
    path: '/l',
    component: List,
    name: 'List',
  }, {
    /*
    vue-router页面传递参数的两种常见方式
      使用params传参
        需要在路由表中做配置，如果不在路由中进行配置也可以进行传递
        在router-link中设置需要传递的参数
          如果使用to+path进行跳转，需要传递的参数是必须在路由表中进行配置
          如果使用:to绑定一个对象传递参数 那么多余的参数可以不用进行配置直接传递
        在获取参数的时候使用this.$route.params进行获取
          或者this.$route.query获取url中传递的参数?形式分割的
      使用query传参，query中的参数直接在url中进行拼接以？形式
    */
    path: '/l/:id', // 路由传参 :id 表示路由中传递的参数的名字
    component: Detail,
    name: 'MovieDetail'
  }]
})

export default router;

传参

<template>
  <div class="list">
    <div class="r">
      <h5>使用name跳转传参</h5>
      <!-- 使用params传参的时候需要注意参数的名字 -->
      <router-link
        :to="{ name: 'MovieDetail', params: { id: movie.id, name: movie.name } }" 
        class="movie-link"
        v-for="movie in list" :key="'1-'+movie.id">{{movie.name}}</router-link>
    </div>
    
    <div class="r">
      <h5>使用path跳转传参</h5>
      <router-link
      :to="{ path: `/l/${movie.id}` }" 
      class="movie-link"
      v-for="movie in list" :key="'2-'+movie.id">{{movie.name}}(使用path跳转)</router-link>
    </div>
    
    <div class="r">
      <h5>使用query传参</h5>
      <!--
        query中的参数直接在url中进行拼接 以？
       -->
      <router-link
        :to="{ 
            name: 'MovieDetail', 
            params: { id: movie.id, name: movie.name }, 
            query: { t: Date.now(), a: movie.id }
          }" 
        class="movie-link"
        v-for="movie in list" :key="'3-'+movie.id">{{movie.name}}</router-link>
    </div>
    
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [{
        id: 1,
        name: '原始时代',
      }, {
        id: 2,
        name: '流浪地球',
      }, {
        id: 3,
        name: '惊奇队长',
      }, {
        id: 4,
        name: '复仇者联盟4'
      }, {
        id: 5,
        name: '蜘蛛侠-英雄远征'
      }]
    }
  }
}
</script>

<style scoped>
.movie-link {
  margin: 0.5rem 1rem;
  color: #999;
}
.r {
  border: #999 solid 1px;
  padding: 1rem;
}
</style>

Detail.js

<template>
  <div class="movie">
    传递的参数为{{id}}
  </div>
</template>
<script>
export default {
  data() {
    return {
      id: '',
    };
  },
  created() {
    console.log(this.$route) // 获取当前的路由信息
    console.log(this.$router)
    this.id = this.$route.params.id
    // this.$route.params 获取通过params传递的参数
    // this.$route.query  获取通过url传递的参数
  },
}
</script>