前言

vue.js除了拥有组件开发体系之外，还有自己的路由vue-router。在没有使用路由之前，我们页面的跳转要么是后台进行管控，要么是用a标签写链接。使用vue-router后，我们可以自己定义组件路由之间的跳转，还可以设置稍复杂的嵌套路由，创建真正的spa（单页面应用）。我之前用vue-cli脚手架写了一个简单的人员管理实例，现在我们不用脚手架，就用原生的vue来写，本文也主要是通过实例来讲解vue.js+vue-router相关知识。

简单路由跳转实例

1.起步

下载vue-router.js，新建项目文件夹命名为router，将下载的vue-router.js放在router/js/路径下。新建index.html作为主页，引入样式文件，引入两个关键的js，vue和vue-router，再在body标签底部引入一个main.js用来写vue实例及配置路由，注意引用顺序。

  1.  <!DOCTYPE html>
  2.  
  3.  <html lang="en">
  4.  
  5.  <head>
  6.  
  7.  <meta charset="UTF-8">
  8.  
  9.  <title>首页</title>
  10.  
  11.  <link rel="stylesheet" href="css/main.css">
  12.  
  13.  <script src="js/vue.js"></script>
  14.  
  15.  <script src="js/vue-router.js"></script>
  16.  
  17.  </head>
  18.  
  19.  <body>
  20.  
  21.  <div id="app"></div>
  22.  
  23.  <template></template> //组件区域
  24.  
  25.  <script src="js/main.js"></script>
  26.  
  27.  </body>
  28.  
  29.  </html>

2.定义路由视图

调用foot-nav组件，将底部导航组件引入在这里，是因为两个路由页面都要用到它

  1.  <div id="app">
  2.  
  3.  <router-view></router-view>
  4.  
  5.  <foot-nav></foot-nav>
  6.  
  7.  </div>

知识点:：<router-view>

<router-view>标签相当于一个插槽，用于将匹配到的组件渲染出来，一个个路由定义的组件相当于卡，跳转某个路由时，该路由下的页面就插在这个插槽中渲染显示。
一个组件可以有多个<router-view>视图，并用name值去区分它们，这种多用在网页布局方面，如上左主结构，这个时候就可以定义三个<router-view>
示例

  1.  <div id="app">
  2.  
  3.  <router-view name="top"></router-view>
  4.  
  5.  <router-view name="left"></router-view>
  6.  
  7.  <router-view name="main"></router-view>
  8.  
  9.  </div>
  10.  
  11.  <script>
  12.  
  13.  var topCom = Vue.extend({
  14.  
  15.  template: '<div>顶部</div>'
  16.  
  17.  })
  18.  
  19.  var leftCom = Vue.extend({
  20.  
  21.  template: '<div>侧边栏</div>'
  22.  
  23.  })
  24.  
  25.  var mainCom = Vue.extend({
  26.  
  27.  template: '<div>主页</div>'
  28.  
  29.  })
  30.  
  31.  var router = new VueRouter({
  32.  
  33.  routes:[
  34.  
  35.  {
  36.  
  37.  path: '/',
  38.  
  39.  name: 'home',
  40.  
  41.  components:{
  42.  
  43.  top: topCom,
  44.  
  45.  left: leftCom,
  46.  
  47.  main: mainCom
  48.  
  49.  }
  50.  
  51.  }
  52.  
  53.  ]
  54.  
  55.  })
  56.  
  57.  var app = new Vue({
  58.  
  59.  el: '#app',
  60.  
  61.  router
  62.  
  63.  })
  64.  
  65.  </script>

再为各个板块设置一下样式，打开浏览器查看效果

3.子组件（底部导航）

3.1 创建子组件

人员管理系统分为两个模块，一个首页，一个管理页，两个页面都需引入一个公共组件：底部导航。在首页index.html中加入以下模板

 
  1.  <template id="footer">
  2.  
  3.  <div class="footer fixed">
  4.  
  5.  <ul>
  6.  
  7.  <li><router-link to="/">首页</router-link></li>
  8.  
  9.  <li><router-link :to="{name:'manage',params:{id:1}}">人员管理</router-link></li>
  10.  
  11.  </ul>
  12.  
  13.  </div>
  14.  
  15.  </template>

知识点:：<router-link>

<router-link>标签主要实现跳转链接功能，属性to='/'即是跳转到path为'/'的路径（我们等会得配置路径为'/'和'/manage'的路由）
router-link除了可以跳转链接之外，还可以传参，可以传多个参数，一般格式为

  1. <router-link to="路由路径"></router-link>
  1. <router-link :to="{ path:路由路径}"></router-link>
  1. <router-link :to="{name:'路由命名',params:{参数名:参数值,参数名:参数值}}"></router-link>

知识点：this.$router.push

如果不想用<router-link>标签，也可以给需要跳转的地方添加一个点击事件，在事件里写this.$router.push方法

  1. this.$router.push('路由路径')
  1. this.$router.push({name:'路由命名',params:{参数名:参数值,参数名:参数值}})

3.2 注册子组件

在main.js中全局注册子组件并且定义vue实例

  1.  Vue.component('foot-nav',{
  2.  
  3.  template: '#footer'
  4.  
  5.  })
  6.  
  7.  var app = new Vue({
  8.  
  9.  el: '#app'
  10.  
  11.  })

4.首页及管理页组件

4.1 创建首页及管理页

 
  1.  <template id="index">
  2.  
  3.  <div>
  4.  
  5.  首页
  6.  
  7.  </div>
  8.  
  9.  </template>
  10.  
  11.  <template id="manage">
  12.  
  13.  <div>
  14.  
  15.  人员管理
  16.  
  17.  <p>id:{{id}}</p>
  18.  
  19.  </div>
  20.  
  21.  </template>

4.2 注册主页及管理页

 
  1.  var Home = Vue.extend({
  2.  
  3.  template: '#index'
  4.  
  5.  })
  6.  
  7.  var Manage = Vue.extend({
  8.  
  9.  template: '#manage',
  10.  
  11.  data(){
  12.  
  13.  return{
  14.  
  15.  id: ''
  16.  
  17.  }
  18.  
  19.  },
  20.  
  21.  mounted:function(){
  22.  
  23.  this.id = this.$route.params.id
  24.  
  25.  }
  26.  
  27.  })

知识点：this.$route.params

this.$route指向vue实例的路由对象，params是路由传过来的参数集合

5.定义路由

定义路由router，并引进vue实例中

  1.  var router = new VueRouter({
  2.  
  3.  routes:[
  4.  
  5.  {
  6.  
  7.  path:'/',
  8.  
  9.  name: 'home',
  10.  
  11.  component:Home
  12.  
  13.  },
  14.  
  15.  {
  16.  
  17.  path:'/manage/:id',
  18.  
  19.  name: 'manage',
  20.  
  21.  component:Manage
  22.  
  23.  }
  24.  
  25.  ]
  26.  
  27.  })
  28.  
  29.  var app = new Vue({
  30.  
  31.  el: '#app',
  32.  
  33.  router
  34.  
  35.  })

知识点：path:'/路径/:参数名'

一个路由要传参时，需在path路径后面添加一个‘/’并加上冒号和参数名

知识点：路由激活class

vue-router当路由处于激活状态时，会有一个class类“router-link-active”，我们只需为这个类添加样式就可以实现路由激活状态下的样式编写
接下来去浏览器查看路由跳转效果

6.嵌套路由

有时我们项目由多层嵌套组件组成，这个时候就需要用到嵌套路由
先看下图例子，我们给manage路由再添加两个子路由

6.1 在组件内部添加<router-view>

 
  1.  <template id="manage">
  2.  
  3.  <div>
  4.  
  5.  人员管理
  6.  
  7.  <ul>
  8.  
  9.  <li><router-link to="/manage/list">人员列表</router-link></li>
  10.  
  11.  <li><router-link to="/manage/edit">编辑</router-link></li>
  12.  
  13.  </ul>
  14.  
  15.  <router-view></router-view>
  16.  
  17.  </div>
  18.  
  19.  </template>

6.2 定义子路由

  1.  //构建组件
  2.  
  3.  var List = Vue.extend({
  4.  
  5.  template: '<div>人员列表</div>'
  6.  
  7.  })
  8.  
  9.  var Edit = Vue.extend({
  10.  
  11.  template: '<div>编辑</div>'
  12.  
  13.  })
  14.  
  15.  var router = new VueRouter({
  16.  
  17.  routes:[
  18.  
  19.  {
  20.  
  21.  path:'/',
  22.  
  23.  name: 'home',
  24.  
  25.  component:Home
  26.  
  27.  },
  28.  
  29.  {
  30.  
  31.  path:'/manage',
  32.  
  33.  name: 'manage',
  34.  
  35.  component:Manage,
  36.  
  37.  //子路由由children表示
  38.  
  39.  children:[
  40.  
  41.  {
  42.  
  43.  path:'list',
  44.  
  45.  name: 'list',
  46.  
  47.  component:List
  48.  
  49.  },
  50.  
  51.  {
  52.  
  53.  path:'edit',
  54.  
  55.  name: 'edit',
  56.  
  57.  component:Edit
  58.  
  59.  }
  60.  
  61.  ]
  62.  
  63.  }
  64.  
  65.  ]
  66.  
  67.  })

7.路由重定向

未设置路由重定向时，当我们随意输入一个路径，会显示一片空白或404。为了防止这种现象发生，我们一般在配置路由时再定义一个重定向路由

  1.  var router = new VueRouter({
  2.  
  3.  routes:[
  4.  
  5.  {
  6.  
  7.  path:'/',
  8.  
  9.  name: 'home',
  10.  
  11.  component:Home
  12.  
  13.  },
  14.  
  15.  {
  16.  
  17.  path:'*',
  18.  
  19.  redirect: '/'
  20.  
  21.  },
  22.  
  23.  ]
  24.  
  25.  })

打开浏览器，随意输入一个未定义的路由查看效果

vue.js路由vue-router（一）——简单路由基础的更多相关文章

  1. vue.js 2.0实现的简单分页

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...

  2. js 引入Vue.js实现vue效果

    拆分组件为单个js见:https://www.jianshu.com/p/2f0335818ceb 效果 html <!DOCTYPE html> <html> <hea ...

  3. Vue.js起手式+Vue小作品实战

    本文是小羊根据Vue.js文档进行解读的第一篇文章,主要内容涵盖Vue.js的基础部分的知识的,文章顺序基本按照官方文档的顺序,每个知识点现附上代码,然后根据代码给予个人的一些理解,最后还放上在线编辑 ...

  4. vue.js利用vue.router创建前端路由

    node.js方式: 利用node.js安装vue-router模块 cnpm install vue-router 安装完成后我们引入这个模板! 下载vue-router利用script引入方式: ...

  5. vue路由--使用router.push进行路由跳转

    手机赚钱怎么赚,给大家推荐一个手机赚钱APP汇总平台:手指乐(http://www.szhile.com/),辛苦搬砖之余用闲余时间动动手指,就可以日赚数百元 route-link是在html中静态定 ...

  6. Vue.js中，如何自己维护路由跳转记录？

    在Vue的项目中,如果我们想要做返回.回退操作时,一般会调用router.go(n)这个api,但是实际操作中,使用这个api有风险,就是会让用户跳出当前应用,因为它记录的是浏览器的访问记录,而不是你 ...

  7. Vue.js 第4章 组件与路由

    组件 什么是组件:组件就是一些标签结构的封装,同时为这些结构添加需要的业务逻辑,设置你想要的样式 一个组件中一般可以设置:结构,功能和样式 为什么要使用组件: 使用方便 复用 组件的创建和使用 组件的 ...

  8. vue.js几行实现的简单的todo list

    序:目前前端框架如:vue.react.angular,构建工具fis3.gulp.webpack等等...... 可谓是五花八门,层出不穷,眼花缭乱...其实吧只要你想玩还是可以玩玩的..下面是看了 ...

  9. vue.js的学习中的简单案例

    今天学习了近年来挺火的一门JS技术,叫vue.js下面是它的一个简单案例: <html> <head> <title>$Title$</title> / ...

  10. 搭建Vue.js环境，建立一个简单的Vue项目

    基于vue-cli快速构建 Vue是近年来比较火的一个前端框架,所以搭建Vue.js环境,要装webpack,vue-cli,Vue 安装webpack命令如下 $ cnpm install webp ...

随机推荐

  1. WebLogic 服务器配置

    环境版本    Windows 8.1       WebLogic 10.3.0     JDK:1.6 WebLogic 创建域在Windows环境下有两种方式: 1.直接在开始菜单创建domai ...

  2. 【codeforces 348B】Apple Tree

    [题目链接]:http://codeforces.com/problemset/problem/348/B [题意] 给你一棵树; 叶子节点有权值; 对于非叶子节点: 它的权值是以这个节点为根的子树上 ...

  3. 2015 Multi-University Training Contest 3 hdu 5323 Solve this interesting problem

    Solve this interesting problem Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K ...

  4. 这两道题目很相似 最优还钱方式 & 除法推导

    http://www.cnblogs.com/grandyang/p/6108158.html http://www.cnblogs.com/grandyang/p/5880133.html 都是根据 ...

  5. jsp-include 写法

    被包含的页面: <%@ page language="java" import="java.util.*" pageEncoding="UTF- ...

  6. Android核心服务解析篇(三)——Android系统的启动

    从大的方面来说.Android系统的启动能够分为两个部分:第一部分是Linux核心的启动,第二部分是Android系统的启动. 第一部分主要包含系统引导,核心和驱动程序等,因为它们不属于本篇要讲的内容 ...

  7. CMD应用 qtp/winshell/cmd的交互

    =================================================================== '採用windows.shell的 sendkeys 方式: s ...

  8. gcc 源代码下载地址

    ftp://mirrors-usa.go-parts.com/gcc/releases/

  9. oracle 11g RAC手动卸载grid，no deinstall

    1.通过root用户进入到grid的ORACLE_HOME [root@db01]# source /home/grid/.bash_profile [root@db01]# cd $ORACLE_H ...

  10. bzoj1003: [ZJOI2006]物流运输（DP+spfa）

    1003: [ZJOI2006]物流运输 题目:传送门 题解: 可以用spfa处理出第i天到第j都走这条路的花费,记录为cost f[i]表示前i天的最小花费:f[i]=min(f[i],f[j-1] ...