Vue + Vue-Router结合开发

在实际开发中，用 Vue.js + vue-router 创建单页应用，是非常简单的。

在使用 Vue.js 时，我们就已经把组件组合成一个应用了，当你要把 vue-router 加进来，只需要配置组件和路由映射，然后告诉 vue-router 在哪里渲染它们。

image

一、Vue-Router

• ** 基本使用**

image

• HTML部分：

> 
> 
> 
> 
> 

> 
>   
Hello App!
> 
>   

> 
>     
> 
>     
> 
>     
> 
>     Go to Foo
> 
>     Go to Bar
> 
>   
> 
>   
> 
>   
> 
>   
> 
> 

• JavaScript

> // 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')
> 
> // 现在，应用已经启动了！

二、案例实操

image

image

image

image

运行结果：

image

三、命名路由

有时候，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。你可以在创建 Router 实例的时候，在 routes 配置中给某个路由设置名称。

比如：

const routes = [

    { path: '/html5', name: 'html5', component: Html5 },

    { path: '/ios', name: 'iOS', component: IOS },

    { path: '/', redirect: '/html5'}  //定义根路由指向

]

  H5学院





  iOS学院

router-link 标签的常用属性

router-view 标签的使用

四、路由嵌套

   实际生活中的应用界面，通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件，借助 vue-router，使用嵌套路由配置，就可以很简单地表达这种关系。以下是案例实操部分：

image

image

image

image

image

运行结果：

image

五、路由对象

    在使用了 vue-router 的应用中，路由对象会被注入每个组件中，赋值为 this.$route ，并且当路由切换时，路由对象会被更新。

路由对象（route object）主要包括以下属性：

$route.path 字符串，对应当前路由的路径，总是解析为绝对路径，如 "/foo/bar";

$route.params 一个 key/value 对象，包含了 动态片段 和 全匹配片段，如果没有路由参数，就是一个空对象;

route.query.user == 1，如果没有查询参数，则是个空对象;

$route.name 当前路由的名称，如果有的话;

$route.hash 当前路由的 hash 值 (带 #) ，如果没有 hash 值，则为空字符串;

$route.fullPath 完成解析后的 URL，包含查询参数和 hash 的完整路径;

$route.matched 一个数组，包含当前路由的所有嵌套路径片段的 路由记录 。路由记录就是 routes 配置数组中的对象副本（还有在 children 数组）。

案例实操

        


            


                
当前路径：{{$route.path}}

                
当前参数：{{$route.params | json}}

                
路由名称：{{$route.name}}

                
路由查询参数：{{$route.query | json}}

                
路由匹配项：{{$route.matched | json}}

            

        

运行结果：

image

六、钩子函数

6.1 什么是钩子函数？

   路由的切换过程，本质上是执行一系列路由钩子函数，钩子函数总体上分为两大类：

全局钩子函数

组件的钩子函数

   全局的钩子函数定义在全局的路由对象中，组件的钩子函数则定义在组件的route选项中。

6.2 全局钩子函数

beforeEach：在路由切换开始时调用

afterEach：在每次路由切换成功进入激活阶段时被调用

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {

    // ...

})

router.afterEach(route => {

    // ...

})

参数：

to: Route: 即将要进入的目标 路由对象。

from: Route: 当前导航正要离开的路由。

next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed （确认的）。

next(false): 中断当前的导航。如果浏览器的 URL 改变了（可能是用户手动或者浏览器后退按钮），那么 URL 地址会重置到 from 路由对应的地址。

next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。

参考：组件的钩子函数

(http://router.vuejs.org/zh-cn/advanced/navigation-guards.html)

(http://www.cnblogs.com/keepfool/p/5690366.html)