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+路由就完成了；