vue的route路游-界面导航-多级路游

来源：互联网发布：淘宝的全球购怎么申请编辑：程序博客网时间：2024/06/07 19:28
<!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>
阅读全文
0 0