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"
});