用Vue.js 和 vue-router 创建单页导航和分页
Vue.js和vue-router简介：
Vue.js
ue.js（读音 /vjuː/, 类似于 view）是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。http://www.jianshu.com/p/bab6a9cf10e0
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把代码下载到Code目录下载文件到此目录
wget http://vuejs.org/js/vue.js
wget https://unpkg.com/[email protected]/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="/foo">Go to Foorouter-link>
<router-link to="/bar">Go to Barrouter-link>
p>
<router-view>router-view>
div>在上面代码中我们使用了router-link
标签，可以通过配置 tag 属性生成别的标签.。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名router-link-active。
<router-link to="home" tag="li">router-link>- router-view
- 创建路由
// 0. 如果使用模块化机制编程，導入Vue和VueRouter，要调用 Vue.use(VueRouter)
// 1. 定义（路由）组件。
// 可以从其他文件 import 进来
const Foo = { template: 'foo' }
const Bar = { template: 'bar' }
// 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
<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="/foo">Go to Foorouter-link>
<router-link to="/bar">Go to Barrouter-link>
p>
<router-view>router-view>
div>
<script>
// 0. 如果使用模块化机制编程，導入Vue和VueRouter，要调用 Vue.use(VueRouter)
// 1. 定义（路由）组件。
// 可以从其他文件 import 进来
const Foo = { template: 'foo' }
const Bar = { template: 'bar' }
// 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>效果如下
上述官方示例简单描述了vue-route的用法，我们可以看到我们在点击两个链接的时候，页面并没有刷新，路由定义的地址在url上作出了体现。
下面我们做下一个实验示例。 示例中使用到bootstrap，本文中不再详细解释 我们看到实验楼的导航列表中有几个菜单，我们点击不同菜单出现不同内容。好的现在实验开始。首先把创建一个实验楼的导航，下面是一个纯html的，我们接下来使用v-router来实现我们的需求。
<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>
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a>课程a>li>
<li><a>路径a>li>
<li><a>训练营a>li>
<li><a>讨论区a>li>
ul>
div>
nav>
<div class="container">
<h1>主页h1>
div>
body>
html>我们要实现的效果是我们点每一个菜单那么下面就切换成每个菜单对应的内容。 我们分析这个页面有几个路径.
每个路径我们对应一个组件
我们在代码中已经引入了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选项数组，定义路由， 然后把组件映射到路由
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">Homerouter-link>
<router-link to="courses">Coursesrouter-link>
<router-link to="paths">Pathsrouter-link>
<router-link to="bootcamp">Bootcamprouter-link> 使用
<router-view>router-view>最后启动路由
const app = new Vue({
router
}).$mount('#app')完整代码 demo2.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">
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: '首页
' }
const Courses = { template: '课程
' }
const Paths = { template: '路径
' }
const Bootcamp = { template: '训练营
' }
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中的切换带动画效果。
-
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 创建单页导航和分页】，即可在线查看了。