<!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>
<script src="./js/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<link rel="stylesheet" href="./bootstrap/dist/css/bootstrap.css">
<style>
body {
background-color: #e8e8e8;
}
</style>
</head>
<body>
<div id="app">
<div class="row">
<div class=" page-item col-xl-8 offset-2">
<h2>这只是一个测试！</h2>
</div>
</div>
<div class="row">
<div class="col-xl-2 offset-2">
<div class=" list-group">
<router-link class="list-group-item" to="/h5">H5</router-link>
<router-link class="list-group-item" to="/java">JAVA</router-link>
<router-link class="list-group-item" to="/android">Android</router-link>
</div>
</div>
<div class="col-xl-8">
<div class="panel page-item">
<div class="panel-body">
<!-- 路由出口 -->
<router-view></router-view>
</div>
</div>
</div>
</div>
</div>
<!-- template标签构建法组件 -->
<template id="my_h5">
<div>
<h2>h5学院</h2>
<img src="./js/01.png" alt="">
<p>这个最好上手！</p>
</div>
</template>
<template id="my_java">
<div>
<h2>java学院</h2>
<img src="./js/02.png" alt="">
<p>这个是后端语言！</p>
</div>
</template>
<template id="my_android">
<div>
<h2>my_android学院</h2>
<img src="./js/01.png" alt="">
<p>这个是可以做APP的！</p>
</div>
</template>
<script>
// 构建组件
const my_h5 = Vue.extend({
template: '#my_h5'
})
const my_java = Vue.extend({
template: '#my_java'
})
const my_android = Vue.extend({
template: '#my_android'
})
// 定义路由
const routes = [{
path: '/h5',
component: my_h5
},
{
path: '/java',
component: my_java
},
{
path: '/android',
component: my_android
},
{ // 路由重定向
path: '*',
redirect: '/h5'
}
]
// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
routes
// （缩写）相当于 routes: routes
})
// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
router
}).$mount('#app')
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
