message元件：

<div>
        <ul>
            <li v-for="m in messageList" :key="m.id">
                <router-link :to="{
                    name:'xiangqing',
                    params:{
                        id:m.id,
                        title:m.title
                    }
                }"
 
>
                    {{m.title}}
                </router-link>
            
            </li>
        </ul>
        <hr>
        <router-view></router-view>
    </div>

params第二種

<router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{m.title}}</router-link
 
>&nbsp;&nbsp;

query第一種：

<router-link :to="{
       name:'xiangqing',
       query:{
       id:m.id,
       title:m.title
    }
}">

query第二種：

<router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link>&nbsp;&nbsp;

detail元件：

　　 <ul>
        <li>訊息編號：{{$route.params.id}}</li>
        <li>訊息標題：{{$route.params.title}}</li>
·　　　　<!--$route 後可跟params和query。具體看哪種傳參-->　　

　　　　　<li>訊息編號：{{$route.query.id}}</li>
        <li>訊息標題：{{$route.query.title}}</li>

    </ul>

Home元件：

<template>
    <div>
        <h2>Home元件內容</h2>
        <div>
            <ul class="nav nav-tabs">
                <li>
                    <router-link class="list-group-item" active-class="active" to="/home/news">News</router-link>
                </li>
                <li>
                    <router-link class="list-group-item" active-class="active" to="/home/message">Message</router-link>
                </li>
            </ul>
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
    export default {
        name:'Home',
    }
</script>

路由router.js

// 該檔案專門用於建立整個應用的路由器
import VueRouter from 'vue-router'
//引入元件
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'

//建立並暴露一個路由器
export default new VueRouter({
    routes:[
        {
            name:'guanyu',
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home,
            children:[
                {
                    path:'news',
                    component:News,
                },
                {
                    path:'message',
                    component:Message,
                    children:[
                        {
                            name:'xiangqing',
                            path:'detail/:id/:title',
                            component:Detail,
                        }
                    ]
                }
            ]
        }
    ]
})

App元件：

<template>
  <div>
    <div class="row">
      <Banner/>
    </div>
    <div class="row">
      <div class="col-xs-2 col-xs-offset-2">
        <div class="list-group">
                    <!-- 原始html中我們使用a標籤實現頁面的跳轉 -->
          <!-- <a class="list-group-item active" href="./about.html">About</a> -->
          <!-- <a class="list-group-item" href="./home.html">Home</a> -->
                    <!-- Vue中藉助router-link標籤實現路由的切換 -->
                    <router-link class="list-group-item" active-class="active" to="/about">About</router-link>
          <router-link class="list-group-item" active-class="active" to="/home">Home</router-link>
        </div>
      </div>
      <div class="col-xs-6">
        <div class="panel">
          <div class="panel-body">
                        <!-- 指定元件的呈現位置 -->
            <router-view></router-view>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    import Banner from './components/Banner'
    export default {
        name:'App',
        components:{Banner}
    }
</script>