<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul>li{
width: 200px;
height: 50px;
list-style: none;
cursor: pointer;
}
li:nth-child(1){
background-color: red;
}
li:nth-child(2){
background-color: green;
}
li:nth-child(3){
background-color: yellow;
}
.box{
width: 300px;
height: 300px;
border: 1px solid #000;
}
</style>
</head>
<body>
<!--
params由name引入，query是path和name都可以
-->
<div id="app">
<ul>
<router-link tag="li" :to="{path:'/html5',query:{des:'這是html5學院'},params:{des:'這是html5學院'}}">First-router</router-link>
<router-link tag="li" :to="{name:'Java',query:{des:'這是java學院'},params:{des:'這是java學院'}}">Second-router</router-link>
<router-link tag="li" :to="{name:'Python',query:{des:'這是python學院'},params:{des:'這是python學院'}}">Third-router</router-link>
</ul>
<router-view class="box"></router-view>
</div>
<template id="html5">
<div class="html5">
<p>HTML5學院</p>
<p>query：{{$route.query}}</p>
<p>params：{{$route.params}}</p>
</div>
</template>
<template id="java">
<div class="java">
<p>java學院</p>
<p>query：{{$route.query}}</p>
<p>params：{{$route.params}}</p>
</div>
</template>
<template id="python">
<div class="python">
<p>python學院</p>
<p>query：{{$route.query}}</p>
<p>params：{{$route.params}}</p>
</div>
</template>
<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
<script>
const html5 = Vue.extend({
template:"#html5"
});
const java = Vue.extend({
template:"#java"
});
const python = Vue.extend({
template:"#python"
});
const Html5=Vue.component("html5",html5);
const Java=Vue.component("java",java);
const Python=Vue.component("python",python);
const routes=[
{path:"/html5",name:"Html5",component:Html5},
{path:"/java",name:"Java",component:Java},
{path:"/python",name:"Python",component:Python}
];
const router=new VueRouter({
routes // (縮寫) 相當於 routes: routes
});
let vm = new Vue({
router,
el: '#app',
data: {}
});
</script>
</body>
</html>
跳轉方式：
（1）使用<router-link>跳轉
<router-link tag="li" :to="{path:'/html5',query:{des:'這是html5學院'},params:{des:'這是html5學院'}}">跳轉Html5學院</router-link>
（2）使用this.$router.push()跳轉
this.$router.push({
name:"html5",
params:{
des:"這是html5學院"
}
});
兩者相同點：
（1）用於跳轉路由時傳遞參數，在跳轉目標路由接收：$route.params或$route.query；
兩者不同點：
（1）url拼接問題
params在傳遞參數時不會把參數拼接在url後面，類似於post請求：
"協議+端口?#/html5"
query在傳遞參數時會把參數拼接在url後面，類似於get請求：
"協議+端口?#/html5?des=這是html5學院"
（2）name和path問題
params只能由name引入
<router-link tag="li" :to="{name:'html5',params:{des:'這是html5學院'}}">First-router</router-link>
query既可以由name引入也可以由path引入
<router-link tag="li" :to="{name:'html5',query:{des:'這是html5學院'}}">First-router</router-link>
<router-link tag="li" :to="{path:'/html5',query:{des:'這是html5學院'}}">First-router</router-link>
（3）頁面刷新問題
params只在路由跳轉時候起作用，如果跳轉完之後再刷新頁面，params消失。而query不會出現這樣的問題。
注意事項
傳遞的方式有：聲明式的導航和編程式的導航router.push(…)，但是如果通過改變瀏覽器url直接跳轉的話，參數就無法傳遞到下一個路由。因此這個問題也值得我們想如何去解決，本人目前還沒想到，如果以後對vue-router有更深入的理解會回來補充這個問題。
本人前端小白一枚，只能把自己理解到的部分寫成博客供新人蔘考學習。有問題請各位指出，本人會做改進，謝謝~