年年有"余"

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 1628|回复: 0

[demo实战] Vue路由的基本使用

[复制链接]
  • TA的每日心情
    奋斗
    2022-12-13 21:26
  • 签到天数: 371 天

    [LV.9]以坛为家II

    发表于 2018-1-16 11:34:51 | 显示全部楼层 |阅读模式
    本帖最后由 Sian 于 2018-1-16 11:34 编辑

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

    屏幕快照 2018-01-16 上午11.09.48.png


    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不在当前的讨论范围,所以不多解释,源代码下载:
    游客,如果您要查看本帖隐藏内容请回复
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    手机版|小黑屋|Archiver|iOS开发笔记 ( 湘ICP备14010846号 )

    GMT+8, 2024-3-29 05:14 , Processed in 0.052606 second(s), 21 queries .

    Powered by Discuz! X3.4

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表