PS: 爲了加深印象，以前學會的東西儘量都整理成筆記
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<p>
<!--使用router-link進行導航，to 指定鏈接，會被渲染成a標籤-->
<router-link to="/">首頁</router-link>
<router-link to="/person">人</router-link>
<router-link to="/animal">物</router-link>
</p>
<router-view></router-view>
</div>
<script src="../vue.min.js"></script>
<script src="../vue-router.min.js"></script>
<script>
//定義路由組件，可以從其他文件中 import 進來
const welcome = {template: "<h2 style='color:red;'>歡迎</h2>"}
const person = {template: "<h2 style='color:green;'>人類</h2>"}
const animal = {template: "<h2 style='color:blue;'>動物</h2>"}
//定義路由，每個路由應該映射一個路由組件
const routes = [
{path: "/",redirect: "/welcome"},//設置默認指向的路徑，前邊固定'/'，redirect爲任意path路徑
{path: "/welcome",component: welcome},
{path: "/person",component: person},
{path: "/animal",component: animal}
]
//生成Vue router路由實例，然後傳入`routes`配置
const router = new VueRouter({
//routes: routes //正常寫法
routes //此爲簡寫
})
//創建根實例，掛載路由，從而整個應用都可以使用路由功能
new Vue({
el: '#app',
data: {
},
router
})
</script>
</body>
</html>