Vue開發版link CND: https://cdn.jsdelivr.net/npm/vue/dist/vue.js
Vue生産版link CND:https://cdn.jsdelivr.net/npm/vue
Vue路由link CND:https://unpkg.com/[email protected]/dist/vue-router.js
将Vue和Vue-router導入項目中;
編寫代碼:
編寫路由檔案,每一個js檔案對應一個路由,路由名稱首字母大寫
ha.js
my.js
配置路由 router.js
router = new VueRouter({
routes: [{
path: '/my',
component: My
},
{
path: '/ha',
component: Ha
}
],
});
在html中引入上述檔案
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.min.js" type="text/javascript" charset="utf-8"></script>
<script src="vue-router.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<router-link to="my">ouyang</router-link>
<router-link to="ha">haha</router-link>
<router-view></router-view>
</div>
</body>
<script type="text/javascript" src="router/my.js"></script>
<script type="text/javascript" src="router/ha.js"></script>
<script type="text/javascript" src="router.js"></script>
<script type="text/javascript">
let vm = new Vue({
el:'#app',
router
})
</script>
</html>
檔案引入順序不能錯,先Vue、vue-router、元件js、路由js；
在js中将在router.js中定義的router配置到vue中
router-view标簽用于展示路由内容
router-link标簽用于跳轉路由，to屬性指定跳轉哪一個路由。
效果圖：
點選My
點選HA
分析得知，vue将router-link标簽映射成一個a标簽，to屬性中的路徑映射成a标簽的href屬性，點選後url發成了改變，vurrouter根據路徑選擇定義好的路由對應的元件顯示；
一個單頁面Vue+路由就完成了；