VueRouter&Bootstrap实现导航跳转

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