用Vue.js 和 vue-router 创建单页导航和分页

2017-04-10 本文已影响3517人蓝桥云课

Vue.js和vue-router简介：

Vue.js

ue.js（读音 /vjuː/, 类似于 view）是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

vue-router

vue-router是Vue.js官方的路由插件，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。在vue-router单页面应用中，组件的切换，使页面效果更加友好。我们单间的把所有的代码都写到一个文件里，这样比较直观的看到每一块代码的含义。

开始之前：

使用 Vue.js 和 vue-router 创建单页应用非常的简单，使用 Vue.js 开发，整个应用已经被拆分成了独立的组件。在使用 vue-router 时，我们需要做的就是把路由映射到各个组件，vue-router 会把各个组件渲染到正确的地方。还可以在组件中使用分页功能。

这个教程：【用Vue.js 和 vue-router 创建单页导航和分页】就是教大家使用Vue.js 和 vue-router 创建单页导航和分页。

教程目录：

该教程总共分三个实验：

使用 vue-router2.0 创建单页导航
在vue-route路由组件中进行分页
使用vue-resource的get方法加载数据

使用 vue-router2.0 创建单页导航

说明：以下操作全部在实验楼在线环境中完成。

打开终端，进入 Code 目录，将其作为课程的工作目录。

启动php内置服务器

sudo php -S localhost:80

在实验环境中80端口并没有被占用，大家在使用中如果被占用的话，可以使用别的端口。例如使用8080端口的话，我们在终端执行下面的命令

sudo php -S localhost:8080

在浏览器访问时需在加上8080端口访问

localhost:8080

wget http://vuejs.org/js/vue.js
wget https://unpkg.com/vue-router@2.2.1/dist/vue-router.js

使用vue-router 的基本步骤为

引入vue.js和vue-router.js

<script src="./vue.js"></script>
<script src="./vue-router.js"></script>

创建组件

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>

在上面代码中我们使用了router-link

router-link 使用语法请参考<a>的用法

<router-link> 组件支持用户在具有路由功能的应用中（点击）导航。通过 to 属性指定目标地址，默认渲染成带有正确链接的<a>标签，可以通过配置 tag 属性生成别的标签.。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名router-link-active。

<!-- 渲染成li标签 -->
<router-link to="home" tag="li"></router-link>

router-view

<router-view>组件是一个 functional 组件，渲染路径匹配到的视图组件。<router-view> 渲染的组件还可以内嵌自己的<router-view>，根据嵌套路径，渲染嵌套组件。

创建路由

// 0. 如果使用模块化机制编程，導入Vue和VueRouter，要调用 Vue.use(VueRouter)

// 1. 定义（路由）组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
  routes // （缩写）相当于 routes: routes
})

// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
  router
}).$mount('#app')

// 现在，应用已经启动了！

完整代码创建demo1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实验楼--vue-route使用</title>
    <script src="./vue.js"></script>
    <script src="./vue-router.js"></script>
</head>
<body>
<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div> 
<script>
// 0. 如果使用模块化机制编程，導入Vue和VueRouter，要调用 Vue.use(VueRouter)

// 1. 定义（路由）组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
  routes // （缩写）相当于 routes: routes
})

// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
  router
}).$mount('#app')

// 现在，应用已经启动了！
</script>
</body>
</html>

效果如下

Paste_Image.png

每个路径我们对应一个组件

Paste_Image.png

我们在代码中已经引入了vue和vue-router文件，第一步创建组件创建这四个组件

const Home = { template: '<div><h1>首页</h1></div>' }
const Courses = { template: '<div><h1>课程</h1></div>' }
const Paths = { template: '<div><h1>路径</h1></div>' }
const Bootcamp = { template: '<div><h1>训练营</h1></div>' }

组件创建完毕

创建路由

var router = new VueRouter()

路在被定义为一个在 router 实例里的一个routes选项数组，定义路由，然后把组件映射到路由

<!--1.x的映射方法-->
<!--router.map({-->
<!--    '/home': { component: Home },-->
<!--    '/courses': { component: Courses },-->
<!--    '/paths': { component: Paths },-->
<!--    '/bootcamp': { component: Bootcamp }-->
<!--})-->
<!--2.x的映射方法-->
var router = new VueRouter({
  routes: [
    { path: '/home', component: Home },
    { path: '/courses', component: Courses },
    { path: '/paths', component: Paths },
    { path: '/bootcamp', component: Bootcamp }
  ]
})

使用路由连接 router-link

<router-link to="home">Home</router-link>
<router-link to="courses">Courses</router-link>
<router-link to="paths">Paths</router-link>
<router-link to="bootcamp">Bootcamp</router-link>

使用 <router-view> 来渲染组件

<!--在页面上写上<router-view></router-view>用来渲染组件-->
<router-view></router-view>

最后启动路由

const app = new Vue({
  router
}).$mount('#app')

完整代码 demo2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实验楼--vue-route使用</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="./vue.js"></script>
    <script src="./vue-router.js"></script>

</head>
<body>
<div id="app">
 <nav class="navbar navbar-inverse">
      <div class="container">

        <div class="navbar-header">
            ![](https://static.shiyanlou.com/img/logo_03.png)
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li><router-link to="home">首页</router-link></li>
            <li><router-link to="courses">课程</router-link></li>
            <li><router-link to="paths">路径</router-link></li>
            <li><router-link to="bootcamp">训练营</router-link></li>
          </ul>
        </div>
        </div>
</nav>
<div class="container">
<router-view></router-view>
</div>
<script>
const Home = { template: '<div><h1>首页</h1></div>' }
const Courses = { template: '<div><h1>课程</h1></div>' }
const Paths = { template: '<div><h1>路径</h1></div>' }
const Bootcamp = { template: '<div><h1>训练营</h1></div>' }

var router = new VueRouter({
  routes: [
    { path: '/home', component: Home },
    { path: '/courses', component: Courses },
    { path: '/paths', component: Paths },
    { path: '/bootcamp', component: Bootcamp }
  ]
})

const app = new Vue({
  router
}).$mount('#app')
</script>
</body>
</html>

效果如下

此处输入图片的描述

此次示例的流程

vue 流程

创建组件
创建路由
映射路由

html

router-link 渲染 router-view

现在我们实现了第一步，下一步要给选中的菜单加上单独的样式。现在我们要用到router-link
的一个属性，在一个router-link被选中的时候会增加一个class属性值router-link-active我们在样式中定义这个样式即可。我们在router-link被选中的时候字体变成白色。

.router-link-active{
        background-color: #ffffff ;
        color: #ff0000 ;
        border-radius:5px;
    }

好我们在页面中加入样式后，发现在使用bootstrap后我们的自定义样式不起作用，我们需要给我们自己的样式添加权重

.router-link-active{
       background-color: #ffffff !important;
        color: #ff0000 !important;
        border-radius:5px;
    }

添加样式保存为demo3.html

效果图如下

此处输入图片的描述

现在把选中样式添加以后，在给router-view中的切换带动画效果。 <router-view>是基本的动态组件，所以我们可以用 <transition>组件给它添加一些过渡效果： transition默认有一个效果。我们也可以直接给transition添加一些动态效果。

transition
- v-enter: 定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。
- v-enter-active: 定义进入过渡的结束状态。在元素被插入时生效，在 transition/animation完成之后移除。
- v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。
- v-leave-active: 定义离开过渡的结束状态。在离开过渡被触发时生效，在 transition/animation完成之后移除。

渲染router-view

<transition name="move">
    <router-view></router-view>
</transition>

我们定义两个简单的效果

.move-enter-active, .move-leave-active {
    transition: opacity .5s
}
.move-enter, .move-leave-active {
     opacity: 0.1
}

添加动画效果后保存为demo4.html在过渡结束和离开时我们把div的透明度设置成0.

效果如下

此处输入图片的描述

简单的设置一个效果以后呢，实验楼的课程下有三个选项，那这三个选项怎么在课程下体现呢，使用嵌套路由就可以实现这个效果。

接下来我们在课程的组件内添加一个新的路由

const Courses = { template: '<div><h1>课程</h1><ul><li><router-link to="/courses/all">全部课程</router-link></li><li><router-link to="/courses/priview">即将上线</router-link></li><li><router-link to="/courses/develop">开发者</router-link></li></ul><div><router-view></router-view></div></div>' }

然后在路由映射中添加子路由的映射，修改courses的路由

 { path: '/courses', component: Courses ,
        children:[
                    {path:'all', component:coursesall},
                    {path:'priview', component:coursespriview},
                    {path:'develop', component:coursesdevelop}
                ]  
  },

把代码保存为demo5.html 现在效果图如下

此处输入图片的描述

我们修改下样式，让页面看的稍微好看点。使用bootstrap给courses子路由中的ul添加tab切换样式

class="nav nav-tabs"

保存为demo6.html 效果如下：

此处输入图片的描述

总结：

通过上面的教程，大家可以简单的了解了vue路由的使用方法，可以知道如何获取和引入vue-route，创建简单的单应用导航页面，希望可以帮到各位小伙伴。

如果你想学习：

在vue-route路由组件中进行分页
使用vue-resource的get方法加载数据

可以点击【用Vue.js 和 vue-router 创建单页导航和分页】，即可在线查看了。

用Vue.js 和 vue-router 创建单页导航和分页

Vue.js和vue-router简介：

Vue.js

vue-router

开始之前：

教程目录：

使用 vue-router2.0 创建单页导航

总结：

猜你喜欢

热点阅读