在使用vue.js创建单页运用的时候，我们通常的做法是配合vue-router一起使用，通过vue-router将组建映射到路由并进行渲染。

例如我们要实现两个页面的切换跳转，就需要使用路由，这里不再使用a标签进行跳转，而是使用标签<router-link>，然后通过属性to来指定链接，最后将路由匹配到的组件渲染到<router-view>中。

在下面的这个例子中，我们要实现主页和新闻两个页面的切换，需要以下几步：

1，两个用于切换的页面组件。

2，配置路由，将组件映射到路由中去，告诉路由在哪里渲染哪个页面。

3，创建router实例。

4，挂载根实例。

这样几步以后，一个简单的vue-router实例就实现了。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>vue</title>
  6.     <script src="vue.js"></script>
  7.     <script src="vue-router.min.js"></script>
  8. </head>
  9. <body>
  10.     <div id="box">
  11.         <div>
  12.             <router-link to="/home">主页</router-link>
  13.             <router-link to="/news">新闻</router-link>
  14.         </div>
  15.         <div>
  16.             <router-view></router-view>
  17.         </div>
  18.     </div>
  19.     <script>
  20.         var Home={template:'<h3>我是主页</h3>'};
  21.         var News={template:'<h3>我是新闻</h3>'};
  22.         const routes=[
  23.             {path:'/home', component:Home},
  24.             {path:'/news', component:News},
  25.             {path:'*', redirect:'/home'}
  26.         ];
  27.         const router=new VueRouter({
  28.             routes
  29.         });
  30.         new Vue({
  31.             router,
  32.             el:'#box'
  33.         });
  34.     </script>
  35. </body>
  36. </html>

查看代码结构的时候我们发现，当 <router-link> 对应的路由匹配成功，将自动设置 class 属性值 .router-link-active，所以，我们可以在刚刚的代码加入一段样式便于查看。

  1. <style>
  2.         .router-link-active{
  3.             font-size: 20px;
  4.             color:#f60;
  5.         }
  6.     </style>

动态匹配路由

我们在写页面的时候，经常会碰到页面只是数据不同，但是都是同一个页面模板的情况，也就是说这些路由对应的是同一个组件，只是参数不同，导致获取的数据不一样，例如下面这种情况：

两个路由请求的页面采用的一样的模板，为了简化操作，方便维护，我们可以实现模板组件的复用，将两个路由映射到同一个组件上去，此时，我们可以在vue-router的路由路径中使用动态路径参数来实现我们期望的效果。

在前面我们提到，在共用组件模板的时候，路径所带的参数是不一样的，这些参数都存在一个叫$router.params的对象中，关于这个对象，官网给出的例子是这样的：

所谓的模式，就是我们在配置路由的时候，路径path的属性值，每段路由参数由一个/名称/:路由参数值组成；而匹配路径则是指标签<router-link>的属性to后面所带的链接；最后则是匹配到路由后，$router.params对象中的参数值，用户可以根据这个对象，获取自己需要传递的信息。结合上面的表格，我们可以这样实现上免图片所示的动态路由效果：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>aaa</title>
  6.     <style>
  7.         .router-link-active{
  8.             font-size: 20px;
  9.             color:#f60;
  10.         }
  11.     </style>
  12.     <script src="vue.js"></script>
  13.     <script src="vue-router.min.js"></script>
  14. </head>
  15. <body>
  16.     <div id="box">
  17.         <p>
  18.             <router-link to="/user/bbb/id/222">用户A</router-link>
  19.             <router-link to="/user/aaa/id/111">用户B</router-link>
  20.         </p>
  21.         <router-view></router-view>
  22.     </div>
  23.  
  24.     <script>
  25.        const User = {
  26.           template: `<div >{{$route.params}}</div>`
  27.        }
  28.  
  29.       const routes= [
  30.           { path: '/user/:username/ID/:id', component: User }
  31.       ]
  32.  
  33.       const router=new VueRouter({
  34.            routes
  35.       });
  36.  
  37.         new Vue({
  38.             router,
  39.             el:'#box'
  40.         });
  41.     </script>
  42. </body>
  43. </html>

嵌套路由

嵌套路由，顾名思义就是路由组件里面继续存在路由结构，我们知道，在跟节点上面的使用路由后，所有匹配到的组件都会被渲染到<router-view>，这个是最顶层的出口，那么在嵌套路由里面的，某个具有子级路由的组件，也可以拥有自己的<router-view>，用于渲染子路由匹配到的组件。

实现路由跳转需要先配置路由，那么嵌套路由也是一样的配置方法，只是会将子路由统一配置在所属路由的children参数中：

具体实现方式如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>vue</title>
  6.     <style>
  7.         .router-link-active{
  8.             font-size: 20px;
  9.             color:#f60;
  10.         }
  11.     </style>
  12.     <script src="vue.js"></script>
  13.     <script src="bower_components/vue-router/dist/vue-router.min.js"></script>
  14. </head>
  15. <body>
  16.     <div id="box">
  17.         <div>
  18.             <router-link to="/home">主页</router-link>
  19.             <router-link to="/user">用户</router-link>
  20.         </div>
  21.         <div>
  22.             <router-view></router-view>
  23.         </div>
  24.     </div>
  25.  
  26.     <script>
  27.         var Home={
  28.             template:'<h3>我是主页</h3>'
  29.         };
  30.         var User={
  31.             template:`
  32.                 <div>
  33.                     <h3>我是用户信息</h3>
  34.                     <ul>
  35.                         <li><router-link to="/user/strive/age/10">Strive</router-link></li>
  36.                         <li><router-link to="/user/blue/age/80">Blue</router-link></li>
  37.                         <li><router-link to="/user/eric/age/70">Eric</router-link></li>
  38.                     </ul>
  39.                     <div>
  40.                         <router-view></router-view>
  41.                     </div>
  42.                 </div>
  43.             `
  44.         };
  45.         var UserDetail={
  46.             template:'<div>{{$route.params}}</div>'
  47.         };
  48.         const routes=[
  49.             {path:'/home', component:Home},
  50.             {
  51.                 path:'/user',
  52.                 component:User,
  53.                 children:[
  54.                     {path:':username/age/:age', component:UserDetail}
  55.                 ]
  56.             },
  57.             {path:'*', redirect:'/home'}
  58.         ];
  59.         const router=new VueRouter({
  60.             routes
  61.         });
  62.         new Vue({
  63.             router,
  64.             el:'#box'
  65.         });
  66.     </script>
  67. </body>
  68. </html>

vue-router2.0的更多相关文章

  1. 使用 Vue 2.0 实现服务端渲染的 HackerNews

    Vue 2.0 支持服务端渲染 (SSR),并且是流式的,可以做组件级的缓存,这使得极速渲染成为可能.同时, 和 2.0 也都能够配合 SSR 提供同构路由和客户端 state hydration.v ...

  2. 新手入门指导：Vue 2.0 的建议学习顺序

    起步 1. 扎实的 JavaScript / HTML / CSS 基本功.这是前置条件. 2. 通读官方教程 (guide) 的基础篇.不要用任何构建工具,就只用最简单的 <script> ...

  3. vue 2.0 无法编译ES6语法

    # vue2.0 webpack 无法编译 ES6 语法 之前在使用 vue 1.x 时用 vue-loader@8.0.0 版本可以正常打包vue的代码,包括ES6语法也能正常转为ES5语法,但是当 ...

  4. Vue 2.0初学后个人总结及分享

    摘要:最近在上海找工作,发现Vue前景还不错,于是就打算先学习一下(之前了解过,但是一直没提到日程上)这篇随笔当是为了自己学习之后,做一个小的阶段性总结.希望本文的内容对于刚开始接触vue的朋友们有点 ...

  5. 《vue.js2.0从入门到放弃》学习之路

    原文地址: Vue.js2.0从入门到放弃---入门实例(一):http://blog.csdn.net/u013182762/article/details/53021374 Vue.js2.0从入 ...

  6. Vue 2.0基础语法：系统指令

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. Vue初体验 新建一个空的项目,引入vue.js文件.写如下代码: &l ...

  7. vue 2.0 路由切换以及组件缓存源代码重点难点分析

    摘要 关于vue 2.0源代码分析,已经有不少文档分析功能代码段比如watcher,history,vnode等,但没有一个是分析重点难点的,没有一个是分析大命题的,比如执行router.push之后 ...

  8. vue-calendar 基于 vue 2.0 开发的轻量，高性能日历组件

    vue-calendar-component 基于 vue 2.0 开发的轻量,高性能日历组件 占用内存小,性能好,样式好看,可扩展性强 原生 js 开发,没引入第三方库 Why Github 上很多 ...

  9. vue cli3.0 结合echarts3.0和地图的使用方法

    echarts 提供了直观,交互丰富,可高度个性化定制的数据可视化图表.而vue更合适操纵数据. 最近一直忙着搬家,就没有更新博客,今天抽出空来写一篇关于vue和echarts的博客.下面是结合地图的 ...

  10. Vue 1.0 和 2.0 执行顺序

    // Vue 生命周期 // Vue 1.0 // 执行步骤:选项/生命周期钩子 // 1 init // 2 created // 3 beforeCompile // 4 compiled // ...

随机推荐

  1. HDU 1907：John（尼姆博弈变形）

    John Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others) Total Submi ...

  2. 2018.4.23 git命令总结

    git clone git pull git add xx git add . git add -A git branch 查看本地分支 git branch --all 查看所有分支 git bra ...

  3. [zoj4046][树状数组求逆序(强化版)]

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=4046 题意:有一个含有n个元素的数列p,每个元素均不同且为1~n中的一个, ...

  4. Python 3 运行 shell 命令

    #python 3.5 , win10 引入包 #os.chdir('path') import osimport subprocess #https://docs.python.org/3.5/li ...

  5. CH4901 关押罪犯

    题意 4901 关押罪犯 0x49「数据结构进阶」练习 描述 S 城现有两座监狱,一共关押着N 名罪犯,编号分别为1~N.他们之间的关系自然也极不和谐.很多罪犯之间甚至积怨已久,如果客观条件具备则随时 ...

  6. java黑魔法-反射机制-02-通过Java反射调用其他类方法

    package com.aaron.reflect; import java.lang.reflect.Method; import java.lang.reflect.InvocationTarge ...

  7. MySQL--批量插入导致自增跳号问题

    对于批量插入数据的操作,MySQL申请自增的策略为: 在批量插入语句执行过程中,申请策略: .第一次申请自增值时,会分配1个 .在N次申请自增值时,会分配上一次(第N-1次)的2倍. 测试Demo: ...

  8. openresty 集成lua-resty-mail +smtp2http 扩展灵活的mail 服务

    lua-resty-mail 是一个不错的openresty mail 扩展,我们可以用来进行邮件发送,支持附件功能 smtp2http 是一个smtp 服务,可以将smtp 请求数据转换为http ...

  9. webpack基本配置文件

    entry(入口文件) 可以传字符串,数组,对象三种格式(字符串和数组默认生成main.js,均生成一个文件,对象有几个入口文件,生成几个文件).默认值为./src/index.js.entry可以传 ...

  10. Revit API 判断一个构件在某个视图中的可见性

    查看 Revit API.发现有Element::IsHidden这个方法.通过UI创建一个element,注意要使得这个element在某些视图可见,但是在另一些视图不可见.运行下面的方法,你会发现 ...