Vue路由的基本使用

Sian

1、先看效果，在线演示地址：http://www.yusian.com/vue/demo/vue_router




2、基本解析

2.1、什么叫路由？
2.1.1、如果你懂网络中的路由，那比较好理解，路由其实是一种路径选择机制，该走哪条路。如果你不懂网络中的路由，但听说过路由器，感觉路由器就是用来上网的，那还是算了吧，这对你理解路由没有帮助！
2.1.2、在解释路由之前，首先要搞清楚的是为什么要用路由，如果不用路由会怎样？在此之前先讲另外一个概念：SPA，这个SPA不是你做大保健的那个SPA，这里SPA的全称是single page web application，单页web应用(自己百度，我也是百度的)。意思就是当前所有的操作都在一个网页中完成！！！
2.1.3、一个网页中实现？对你没听错，就是一个网页，那一个网页中怎么能展现这么多的内容呢？我还有各种跳转呢？说到点上了，这就是路由需要完成的，你所谓的各种页面跳转，跳到哪里去，由路由来管理，而跳转的页面，你可以理解成当前页面的子页面，或其他模板组件之类的。总之不会整个页面重新请求了，刷新也是局部，通过js去完成，所以js在这里就成了逻辑的主要承载体了，差不多有点概念了吧。
2.2、如何使用路由？
2.2.1、前面有讲到，路由与各种跳转有关，那肯定是和某些个跳转直接关联才对，其实是这样的，最常见的跳转就是超链接与按钮事件，那我要怎么才能和超链接或者按钮的事件产生关系呢，答案是不关你的事！Vue中有专门用来路由跳转的标签<router-link>

[HTML] 纯文本查看 复制代码

      <ul class="nav nav-pills nav-stacked">
        <!-- 1、编写路由入口，即路径选择标签 -->
        <li><router-link to="/">Home</router-link></li>
        <li><router-link to="/html5">Html5</router-link></li>
        <li><router-link to="/java">Java</router-link></li>
        <li><router-link to="/python">Python</router-link></li>
      </ul>

2.2.2、使用的时候只需要给to属性赋值，告诉vue你要跳到哪里去就行了，那这些路径又代表什么呢？答案是模板！2.2.3、前面是路由的使用，在使用前要先定义，定义路径和模板的对应关系，路到路径xxx就显示yyy，还有一点，这个yyy显示在什么地方呢？用标签<router-view>来标记，这个标签放哪里，就会显示在哪里；

2.3、路由定义

2.3.1、定义模板，这个简单

[HTML] 纯文本查看 复制代码

<!-- 各模板定义 -->
<template id="home"><img src="https://dummyimage.com/600x300/f00/fff&text=Home" alt="Home"></template>
<template id="h5"><img src="https://dummyimage.com/600x300/e00/fff&text=Html5" alt="Html5"></template>
<template id="java"><img src="https://dummyimage.com/600x300/d00/fff&text=Java" alt="Java"></template>
<template id="python"><img src="https://dummyimage.com/600x300/c00/fff&text=Python" alt=""></template>

2.3.2、构造模板组件

[JavaScript] 纯文本查看 复制代码

// 1、使用Vue构造函数构造组件对象
const home = Vue.extend({template: "#home"});
const h5 = Vue.extend({template: "#h5"});
const java = Vue.extend({template: "#java"});
const python = Vue.extend({template: "#python"});

2.3.3、创建一个路由对象，所有的路由表都在这里了

[JavaScript] 纯文本查看 复制代码

// 2、使用VueRouter创建一个路由对象，该对象中包含多个路由映射表(路径与模板的对应表)
let router = new VueRouter({
  routes:[
    {
      path: '/',
      component: home
    },{
      path: '/html5',
      component: h5,
      alias: '/h5'
    },{
      path: '/java',
      component:java
    },{
      path: '/python',
      component: python
    }
  ]
});

2.3.4、绑定Vue实例

[JavaScript] 纯文本查看 复制代码

// 3、初始化对象加载路由
let demo = new Vue({
  el: '#app',
  router:router
});

3、bootstrap不在当前的讨论范围，所以不多解释，源代码下载：

游客，如果您要查看本帖隐藏内容请回复