Vue路由的基本使用
本帖最后由 Sian 于 2018-1-16 11:34 编辑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> <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、定义模板，这个简单<!-- 各模板定义 -->
<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、构造模板组件// 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、创建一个路由对象，所有的路由表都在这里了// 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实例// 3、初始化对象加载路由
let demo = new Vue({
el: '#app',
router:router
});3、bootstrap不在当前的讨论范围，所以不多解释，源代码下载：**** Hidden Message *****
页:
[1]