一、概述

vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。

vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。

而传统的多页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。

路由中有三个基本的概念 route, routes, router。

1. route，它是一条路由，由这个英文单词也可以看出来，它是单数， Home按钮  => home内容， 这是一条route,  about按钮 => about 内容， 这是另一条路由。

2. routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。[{home 按钮 =>home内容 }， { about按钮 => about 内容}]

3. router 是一个机制，相当于一个管理者，它来管理路由。因为routes 只是定义了一组路由，它放在哪里是静止的，当真正来了请求，怎么办？ 就是当用户点击home 按钮的时候，怎么办？

这时router 就起作用了，它到routes 中去查找，去找到对应的 home 内容，所以页面中就显示了 home 内容。

4. 客户端中的路由，实际上就是dom 元素的显示和隐藏。当页面中显示home 内容的时候，about 中的内容全部隐藏，反之也是一样。客户端路由有两种实现方式：基于hash 和基于html5 history api.

二、vue-router基本用法

在vue中实现路由还是相对简单的。因为我们页面中所有内容都是组件化的，我们只要把路径和组件对应起来就可以了，然后在页面中把组件渲染出来。

2.1 一个简单的单页应用

直接来看一个demo:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>vue-router</title>
  6. </head>
  7. <body>
  8.     <div id="app">
  9.         <header>
  10.             <router-link class="red" to="/home">Home</router-link>　　//用于跳转
  11.             <router-link to="/about">About</router-link>
  12.             <!--  增加两个到user组件的导航，展示动态路由，可以看到这里使用了不同的to属性 -->
  13.             <router-link to="/user/123">User123</router-link>
  14.             <router-link to="/user/456">User456</router-link>
  15.         </header>
  16.         <router-view></router-view>　　//用于被替换渲染
  17.     </div>
  18. </body>
  19. </html>
  20. <script src="../lib/vue.js"></script>
  21. <script src="../lib/vue-router.js"></script>
  22. <script src="../js/demo1.js"></script>
  1. //1.创建组件
  2. var Home = Vue.extend({
  3.     template: '<div>' +
  4.                     '<h1>Home</h1>' +
  5.                     '<p>{{msg}}</p>' +
  6.               '</div>',
  7.     data: function() {
  8.         return {
  9.             msg: 'Hello, vue router!'
  10.         }
  11.     }
  12. });
  13.  
  14. var About = Vue.extend({
  15.     template: '<div>' +
  16.                 '<h1>About</h1>' +
  17.                 '<p>This is the tutorial about vue-router.</p>' +
  18.              '</div>'
  19. });
  20.  
  21. var User = Vue.extend({　　//展示动态路由
  22.     template: '<div>' +
  23.                 '<h1>User</h1>' +
  24.                 '<p>我是user组件,动态部分是{{dynamic}}</p>' +
  25.               '</div>',
  26.     computed: {
  27.         dynamic: function () {
  28.             //当整个vue-router 注入到根实例后，在组件的内部，可以通过this.$route来获取到router实例。它有一个params 属性，就是来获得这个动态部分的。
  29.             return this.$route.params.id
  30.         }
  31.     },
  32.     watch: {
  33.         //利用watch来监听$route的变化,可以进行更多的操作。to表示的是你要去的那个组件，from 表示的是你从哪个组件过来的，它们是两个对象。
  34.         $route: function (to, from) {
  35.             console.log(to),
  36.             console.log(from)
  37.         }
  38.     }
  39. });
  40.  
  41. //2.创建router,并映射路由；
  42. var router = new VueRouter({
  43.     routes: [
  44.         {
  45.             path: '/home',     //映射路径
  46.             component: Home    //映射组件
  47.         },
  48.         {
  49.             path: '/about',
  50.             component: About
  51.         },
  52.         {
  53.             path: '/user/:id',      //配置动态的id,实现动态路由
  54.             component: User
  55.         },
  56.         {
  57.             path: '/',
  58.             redirect: '/home'   // 默认重定向
  59.         }
  60.     ]
  61. });
  62.  
  63. //3.把创建好的路由挂载在根组件下面就可以了，即挂载到#app元素下面
  64. const app = new Vue({
  65.     router
  66. }).$mount('#app');
  67.  
  68. //4.使用标签<router-link> ,<router-link> 有一个非常重要的属性 to，定义点击之后，要到哪里去
  69. //5.使用<router-view>标签: 在页面上使用<router-view></router-view>标签，它用于渲染匹配的组件。

2.2嵌套路由

嵌套路由，主要是由我们的页面结构所决定的。当我们进入到home页面的时候，它下面还有分类，如手机系列，平板系列，电脑系列。当我们点击各个分类的时候，它还是需要路由到各个部分，如点击手机，它肯定到对应到手机的部分。

在路由的设计上，首先进入到 home ,然后才能进入到phone, tablet, computer.  Phone, tablet, compute 就相当于进入到了home的子元素。所以vue  提供了children属性，它也是一组路由,相当于我们所写的routes。

我们把上面的Demo简单修改一下：html页面不动，只是简单改一些js的部分

  1. var Home = Vue.extend({
  2.     template: '<div>' +
  3.                     '<h1>Home</h1>' +
  4.                     '<p>{{msg}}</p>' +
  5.                     '<p>'+
  6.                         '<router-link to="/home/phone">手机 </router-link>'+　　　　　　//加入子路由跳转方式
  7.                         '<router-link to="/home/tablet">平板 </router-link>'+
  8.                         '<router-link to="/home/computer">电脑 </router-link>'+
  9.                     '</p>'+
  10.                     '<router-view></router-view>'+　　　　//在父页面的里面加入子路由页面，用于子路由页面的替换和渲染
  11.               '</div>',
  12.     data: function() {
  13.         return {
  14.             msg: 'Hello, vue router!'
  15.         }
  16.     }
  17. });
  18.  
  19. // 子路由组件
  20. var phone = Vue.extend({
  21.     template: '<div>This is phone</div>'
  22. });
  23.  
  24. var tablet = Vue.extend({
  25.     template: '<div>This is tablet</div>'
  26. });
  27.  
  28. var computer = Vue.extend({
  29.     template: '<div>This is computer</div>'
  30. });
  31.  
  32. var router = new VueRouter({
  33.     routes: [
  34.         {
  35.             path: '/home',     //映射父页面路径
  36.             component: Home,    //映射父组件
  37.             children: [　　　　//利用children属性实现子路由
  38.                 {
  39.                     path: "phone",　　//映射子路由页面路径
  40.                     component: phone　　//映射子组件
  41.                 },
  42.                 {
  43.                     path: "tablet",
  44.                     component: tablet
  45.                 },
  46.                 {
  47.                     path: "computer",
  48.                     component: computer
  49.                 },
  50.                 // 当进入到home时，下面的组件显示
  51.                 {
  52.                     path: "",
  53.                     component: phone
  54.                 }
  55.             ]
  56.         },
  57.         {
  58.             path: '/about',
  59.             component: About
  60.         },
  61.         {
  62.             path: '/user/:id',      //配置动态的id,实现动态路由
  63.             component: User
  64.         },
  65.         {
  66.             path: '/',
  67.             redirect: '/home'   // 默认重定向
  68.         }
  69.     ]
  70. });

2.3命名路由

命名路由，很简单，因为根据名字就可以知道，这个路由有一个名字，那就直接给这个路由加一个name 属性，就可以了。 给user 路由加一个name 属性：

  1.         {
  2.             name: 'user',
  3.             path: '/user/:id',
  4.             component: User
  5.         },

命名路由的使用, 在router-link 中用动态的to属性就可以使用对象了

  1.             <router-link to="/user/123">User123</router-link>
  2.             <router-link :to="{name:'user',params: {id:456}}">User456</router-link>
    　　　　　　　//这两个是等价的，当使用对象作为路由的时候，to前面要加一个冒号,表示绑定

2.4跳转

vue-router 有两种跳转页面的方法

第一种是使用内置的＜router-link＞组件，它会被渲染为一个<a>标签，如：

  1. <router-link to="/home">Home</router-link>

< router-link＞除了to还有其他的一些属性， 常用的有：

  1. • tag
  2. tag 可以指定渲染成什么标签，比如＜router-link to = "/about ” tag＝” li ”〉渲染的结果就是＜li >而不是＜a>。
  3.  
  4. • replace
    使用replace 不会留下History 记录，所以导航后不能用后退键返回上一个页面，如<router-link to ＝”/about” replace＞。
  5.  
  6. • active-class
    当＜router-link> 对应的路由匹配成功时，会自动给当前元素设置一个名为router-link-active的class，如需要修改样式，直接修改router-link-active就可以．

有时候，跳转页面可能需要在JavaScript 里进行，类似于window. location.href。这时可以用第二种跳转方法，使用router 实例的方法。

以demo中的about为例：

  1. var About = Vue.extend({
  2.     template: '<div>' +
  3.                 '<h1>About</h1>' +
  4.                 '<p>This is the tutorial about vue-router.</p>' +
  5.                 '<button @click="handleRouter">返回home页</button>'+　　//在about页面增加一个跳转按钮
  6.              '</div>',
  7.     methods: {
  8.         handleRouter: function () {
  9.             this.$router.push('/home')　　//使用$router中的push方法就行路由跳转
  10.         }
  11.     }
  12. });
  1. $router 还有其他一些方法：
  2. • replace
  3. 类似于＜router-link＞的replace 功能，它不会向history 添加新记录，而是替换掉当前的history 记录，如this.$router.replace （’/user/123'）； 。
  4.  
  5. • go
  6. 类似于window.history.go()，在history 记录中向前或者后退多少步，参数是整数，例如：
  7. ／／后退1 页
  8. this.$router.go(-1) ;
  9. ／／前进2 页
  10. this.$router.go(2);

vue-router详解——小白速会的更多相关文章

  1. vue计算属性详解——小白速会

    一.什么是计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example"> ...

  2. vue内置指令详解——小白速会

    指令 (Directives) 是带有 v- 前缀的特殊属性,职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM. 内置指令 1.v-bind:响应并更新DOM特性:例如:v-bi ...

  3. vue class与style 绑定详解——小白速会

    一.绑定class的几种方式 1.对象语法 直接看例子: <div id="app3"> <div :class="{'success':isSucce ...

  4. vue表单详解——小白速会

    一.基本用法 你可以用 v-model 指令在表单 <input> 及 <textarea> 元素上创建双向数据绑定. 但 v-model 本质上不过是语法糖.它负责监听用户的 ...

  5. 七. Vue Router详解

    1. 认识路由 1.1 路由概念 路由是什么? 路由是一个网络工程里面的术语. 路由(routing)就是通过互联的网络把信息从源地址传输到目的地址的活动 --- 维基百科 路由器提供了两种机制:路由 ...

  6. Vue 路由详解

    Vue 路由详解 对于前端来说,其实浏览器配合超级连接就很好的实现了路由功能.但是对于单页面应用来说,浏览器和超级连接的跳转方式已经不能适用,所以各大框架纷纷给出了单页面应用的解决路由跳转的方案. V ...

  7. Vue 实例详解与生命周期

    Vue 实例详解与生命周期 Vue 的实例是 Vue 框架的入口,其实也就是前端的 ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进 ...

  8. Vue.prototype详解

    参考地址:Vue.prototype详解 如果需要设置 全局变量,在main.js中,Vue实例化的代码里添加. 不想污染全局作用域.这种情况下,你可以通过在 原型 上定义它们使其在每个Vue实例中可 ...

  9. 六. Vue CLI详解

    1. Vue CLI理解 1.1 什么是Vue CLI 如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI,如果你在开发大型项目那么你需要它, 并且必然需要使用Vue CLI. 使 ...

随机推荐

  1. eclipse打包

  2. iOS 10.10 10.11 10.12 安装升级CocoPods

    CocoPods简介 CocoaPods是一个用Ruby写的,负责管理iOS以及OSX系统下的一个第三方类库管理工具,通过CocoaPods,我们可以集中,统一的管理第三方开源库.当然这些库徐亚Coc ...

  3. c++ --> #define中的三个特殊符号：#，##，#@

    #define中的三个特殊符号:#,##,#@ 看下面三个define宏定义: #define Conn(x,y) x##y #define ToChar(x) #@x #define ToStrin ...

  4. KVM之八：快照创建、恢复与删除

    kvm虚拟机默认使用raw格式的镜像格式,性能最好,速度最快,它的缺点就是不支持一些新的功能,如支持镜像,zlib磁盘压缩,AES加密等.要使用镜像功能,磁盘格式必须为qcow2.下面开始kvm虚拟机 ...

  5. Python中的PYTHONPATH环境变量

    PYTHONPATH是Python中一个重要的环境变量,用于在导入模块的时候搜索路径.可以通过如下方式访问: >>> import sys >>> sys.path ...

  6. 路径字符串数据转化为树型层级对象，path to json tree

    由于项目中使用了react 及 ant-design ,在使用tree树型控件时,需要 类似下面的数据, const treeData = [{ title: '0-0', key: '0-0', c ...

  7. Excel导出不同浏览器下文件名乱码问题

    解决思路:通过请求头中的User-Agent参数中的信息来区分不同浏览器 public Object exportPz(HttpServletRequest request, HttpServletR ...

  8. string和c_str()使用时的坑

    先看一段代码和它的运行结果: 看到结果了么这个运行的结果和我们理解的是不会有差距.对于经验丰富的开发者可能会微微一笑,但是对于一个刚刚学习的人就开始疑惑了.这里主要说两个问题: 1.声明了一个stri ...

  9. SQL常用语句,随时用随时更新

    更多详细说明文档查询 http://www.postgres.cn/docs/9.5/infoschema-columns.html 1.1通过表名查询表的属性 SELECT * FROM sys.s ...

  10. JAVA_SE基础——53.什么是异常？

    尽管人人都希望自己的身体健康,处理事情都能顺利进行, 但是在实际生活中总会遇到各种状况,比如,感冒发烧,电脑突然蓝屏死机等..程序也一样,程序在运行过程中,也会发生各种非正常状况,比如程序运行时磁盘不 ...