<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入順序不能亂 -->
<script src="./vue_2.5.22.js"></script>
<script src="./vue-router_3.0.2(1).js"></script>
</head>
<body>
<!-- 被VM實例所控制的區域 -->
<div id="app">
<!--
router-link是Vue中提供的標籤 默認會被渲染為a標籤
to屬性默認會被渲染為href屬性
to屬性的值默認會被渲染為#開頭的hash地址
-->
<router-link to='/user'>User</router-link>
<router-link to='/register'>Register</router-link>
<!--
路由填充位(也叫作佔位符)
將來通過路由規則匹配到的組件，將會被渲染到router-view所在的位置
-->
<router-view></router-view>
</div>
<script>
// 創建路由組建
const User = {
template: '<h1>User 組件</h1>'
}
const Register = {
template: '<h1>regiter 組件</h1>'
}
// 創建路由實例對象
const router = new VueRouter({
// 所有的路由規則
routes: [
// 兩個路由規則 每個路由規則都是一個配置對象 其中至少包含path和component兩個屬性
// path 表示當前路由規則匹配的hash地址 router-link to裏面是誰就要寫誰 要一一對應
// component 表示當前路由規則對應要展示的組件 只接收組件對象、不接受字符串 後面接const常量後面定義的
{ path: '/user', component: User },
{ path: '/register', component: Register }
]
})
// 創建VM對象
const vm = new Vue({
// 指定控制的區域
el: '#app',
data: {
},
// 掛載路由實例對象 為了能夠讓路由規則生效 必須把路由對象掛載到Vue實例對象上
// router:router
router
})
</script>
</body>
</html>
