<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<style>
body{
background-color:#E8E8E8 ;
}
</style>
</head>
<body>
<div id="app">
<div id="row">
<div class="col-xs-8 col-xs-offset-2">
<div class="page-header">
<h1>梦起航</h1>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-2 col-xs-offset-2">
<div class="list-group">
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link class='list-group-item' :to="{name:'h5'}">java学院</router-link>
<router-link class='list-group-item' :to="{name:'java'}">Go to Bar</router-link>
<router-link class='list-group-item' :to="{name:'python'}">pythom学院</router-link>
</div>
</div>
<div class="col-xs-6">
<div class="panel">
<div class="panel-body">
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
</div>
</div>
</div>
</div>
<template id="h5">
<div>
<h2>HTML学院</h2>
<p>掌握面向未来的神级</p>
<img src="04表单提交/img/takeSbmComment.png" width="250"/>
<div>
<ul class="nav nav-tabs">
<router-link to="/basic">基础班</router-link>
<router-link to="/big">大神班</router-link>
</ul>
<div class="tab-content">
<router-view></router-view>
</div>
</div>
</div>
</template>
<template id="basic">
<div>
<h3>基础班</h3>
<p>快速入门html</p>
<img src="04表单提交/img/bg.jpg" width="150"/>
</div>
</template>
<template id="big">
<div>
<h3>大神班</h3>
<p>全栈开发工程师</p>
<img src="04表单提交/img/inputBg.png" width="150"/>
</div>
</template>
<template id="java">
<div>
<h2>java学院</h2>
<p>cccccccccccccccccccc</p>
<img src="04表单提交/img/takeSbmComment.png" width="250"/>
</div>
</template>
<template id="python">
<div>
<h2>python学院</h2>
<p>vvvvvvvvvvvvvv</p>
<img src="04表单提交/img/ad.png" width="250"/>
</div>
</template>
<script >
// 0. 如果使用模块化机制编程，導入Vue和VueRouter，要调用 Vue.use(VueRouter)
// 1. 定义（路由）组件。
// 可以从其他文件 import 进来
//1. 准备一个根组件
const HTML5 = Vue.extend({
template:'#h5'
});
const basic = Vue.extend({
template:'#basic'
});
const big = Vue.extend({
template:'#big'
});
//2. Home News组件都准备
const java = Vue.extend({
template: '#java'
});
const python = Vue.extend({
template: '#python'
});
// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
{path:'/h5',
name:'h5',
component:HTML5 ,
children:[
{path:'/basic',component:basic },
{path:'/big',component:big },
//配置路由
{path:'/',redirect:'/big'}
]
},
{path:'/java',component:java,name:'java' },
{path:'/python',component:python,name:'python' },
//配置路由
{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>vue的route路游-界面导航-多级路游
最新推荐文章于 2024-02-09 16:05:37 发布
扫一扫
5063
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
