VueRouter&Bootstrap实现导航跳转
来源:互联网 发布:java 解压war包 编辑:程序博客网 时间:2024/06/05 17:02
VueRouter是Vue提供的一个额外包,是一个可以帮助我们做web统一跳转的路由管理器。
Bootstrap则是提供统一网站风格的框架。
本文主要介绍的是VueRouter,不对Bootstrap做过多的讲解。
项目准备
项目效果演示
本项目主要实现一个导航跳转,点击导航跳转到不同的界面。效果如下:
下载源码
本文采取npm工具实现下载,主要需要下载的源码分为被vue,vue-router,bootstrap,命令如下:
1.vue
源码下载命令:npm install vue –save
需要拷贝到项目中的文件是:vue.js/vue.min.js
2.vue-router
源码下载命令:npm install vue-router –save
需要拷贝到项目中的文件是:vue-router.js/vue-router.min.js
3.bootstrap
源码下载命令:npm install bootstrap@3 –save
需要拷贝到项目中的文件是:dist目录下的三个文件
导入源代码
我的项目是这样的:
在html的在header标签中,添加源码:
创建标题
上面的界面分为顶部标题 左下导航 右下的具体画板三部分组成。
这里的主要采用了栅格系统的布局方式,代码如下:
创建导航和面板界面
下面就是导航和面板的界面模板:
你可以认为router-link就是一个a标签,而to属性则是href,指向了要跳转的路径。
那么,router-view就是跳转的界面容器。
接着我们为2个导航创建具体的展示面板,代码如下:
代码的实现
//1.定义需要跳转界面的模板const html5 = Vue.extend({ template: "#html"});const ios = Vue.extend({ template: "#ios"});//2.定义路由的规则(path是跳转的路径 component是展示的组件) 注意routes命名不要修改const routes = [ {path: "/html5", component: html5}, {path: "/ios", component: ios}, //做一个默认的重定向跳转 {path: '/', redirect: '/html5'}];//3.定义路由器 注意router命名不要修改const router = new VueRouter({routes});// 4.为box标签下添加路由 下面这两种写法都是是可以的// const app = new Vue({// router// }).$mount('#box')new Vue({ el: "#box", router});
命名路由
理由的跳转我们是通过路径来实现的,但系统也为每一个路由添加一个命名。我们在跳转的过程中通过名称来决定需要跳转到哪一个路由。
注意:上面的配置需要为to添加一个 : 来绑定才有效。
路由的跳转规则需要添加name属性。注意path这路径不能去掉,它会在你跳转的时候显示到浏览器的网址中。
嵌套路由
下面的例子中,我们除了看到一级导航外,对于html5学院模块的底部又存在一个2级导航。效果如下:
1.针对上面的代码我们可以进行改造,添加HMTL5学院底部的代码:
2.添加需要被替换的2个模板:
3.定义子组件模板,并添加到路由中:
//1.定义需要跳转界面的模板const intro = Vue.extend({ template: "#intro"});const activity = Vue.extend({ template: "#activity"});
- VueRouter&Bootstrap实现导航跳转
- bootstrap实现导航等
- bootstrap实现垂直导航框架
- bootstrap实现垂直导航框架
- bootstrap实现垂直导航框架
- bootstrap导航栏如何跟随页面跳转而变化
- Bootstrap实现响应式导航栏效果
- Bootstrap实例2---导航栏的实现
- bootstrap自定义样式-bootstrap侧边导航栏的实现
- Bootstrap多级导航栏(级联导航)的实现代码
- Bootstrap 导航
- bootstrap导航
- bootstrap导航
- bootstrap--导航
- Bootstrap 导航
- Bootstrap导航
- 导航控制器Navigation实现页面跳转
- jquery实现menu导航菜单跳转样式
- React Native导航器之react-navigation使用
- maven环境配置
- 三 · linux 的常用命令
- leetcode_zigzag conversion
- git tortoisegit 配置
- VueRouter&Bootstrap实现导航跳转
- OverFeat
- 2017北大信科夏令营D
- Python学习----报错总结
- Just a Hook (hdu 1698 线段树区间更新)
- 网络请求数据 有null 的处理
- 问候Java移位运算符大爷
- redis 的链表简单解析
- [ css ]文本溢出显示省略号