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

{name:'detail',path:'/detail',組件}

<router-link :to="{name:'detail',params:{name:1}}"> xxx </router-link>

{name:'detail',path:'/detail/:name',組件}

import Vue from 'vue';
import VueRouter from 'vue-router';
//引入主體（頁面初始化顯示）
import App from './components/app.vue';
//一個個link對象 - 分類
import Detail from './components/detail.vue';
import List from './components/list.vue';

//安裝插件
Vue.use(VueRouter);//掛載屬性

//創(chuàng)建路由對象并配置路由規(guī)則
let router = new VueRouter({
  //routes
  routes: [
  //一個個link對象
  {name: 'detail',path: '/detail',component: Detail},
  //此處的path規(guī)則不受list.vue中的query（匹配參數(shù)規(guī)則的）影響
  {name: 'list',path: '/list',component: List}
 ]
});

/* new Vue 啟動 */
new Vue({
 el: '#app',
 render: c => c(App),
 //讓vue知道我們的路由規(guī)則
 router:router,//可以簡寫為router
})

<template>
 <div>
  <div class="header">
    頭部 - 導航欄目

    <p>
      <router-link :to="{name:'detail'}">細節(jié)列表1</router-link>
      <router-link :to="{name:'list'}">英雄列表1</router-link>
    </p>
  </div>

  <!--留坑，非常重要-->
    <router-view class="main"></router-view>

    <div class="footer">底部 - 版權(quán)信息</div>

 </div>
</template>

<script>


  export default {
   data(){
    return{

    }
   },
   methods:{

   }
  }
</script>

<style scoped>
  .header,.main,.footer{text-align: center;padding: 10px;}

  .header{height:70px;background: yellowgreen;}
  .main{height:300px;background: skyblue;}
  .footer{height: 100px;background: hotpink;}
</style>

<template>
  <div>
    我是list列表
    <!-- :key是綁定器 -->
    <!-- query是查詢字符串，加查詢參數(shù) ，相當于查詢規(guī)則；對比參考main.js關于路由配置path屬性-->
    <ul>
      <li v-for="(hero,index) in heros" :key="index">
        {{hero.name}}
        <router-link :to="{name:'detail',query:{id:index}}">查看詳情</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
  export default{
    data(){
      return{
        heros:[{
          name:'李白'
        },{
          name:'杜甫'
        },{
          name:'屈原'
        },{
          name:'白居易'
        },{
          name:'李清照'
        },{
          name:'歐陽修'
        }]
      }
    }
  }
</script>

<style scoped> 
  ul,li{list-style: none;}
</style>

<template>
  <div>
    我是詳情
  </div>
</template>

<script>
  export default{
    data(){
      return{

      }
    },//DOM尚未生成
    create(){
      //獲取路由參數(shù)
      //vue-router中掛載兩個對象的屬性
      //$route(信息數(shù)據(jù))
      //$router(功能函數(shù))
      /*console.log(this.$route.params);*/
      console.log(this.$route.query);

    },//已經(jīng)將數(shù)據(jù)裝載到頁面上去了，DOM已經(jīng)生成
    mounted(){

    }
  }
</script>

<style>
</style>