zoukankan      html  css  js  c++  java
  • (尚040) vue_基本路由

    左侧两个基本路由连接,右侧是路由组件显示部分;头部是固定的

    注意:

    现在流行SPA应用(单页应用:就有一个真实页面);

    关键是承载的功能页面有很多,但是涉及到页面本身有很多变化,但是不能跳转;

    这就引出路由连接,点击路有链接,不会向后台发送请求(如果发送请求,页面就跳转了);

    只是更新显示不同的路由组件,但是路由组件内部会向后台发送ajax请求,可能动态获取数据

    =====================================================================

    实际项目中组件分为两大类:路由组件和非路由组件

    非路由组件:components下面

    路由组件:两种名字比较常见:views/pages

    =====================================================================

    当前有两个路由组件:about和home

    1.先创建两个组件

     2.把路由组件映射成路由:(由路由器映射成路由:)

    2.1).创建路由器(需要专门定义一个模块,故专门定义一个文件夹router)

     在router文件夹下新建index.js文件

    2.2)路由组件配置好了,路由配置好了,接下来配置路由器

    在入口js(main.js)中创建vue时配置

     3.编写页面

     App.vue

    <template>
    <div>
    <div class="row">
    <div class="col-xs-offset-2 col-xs-8">
    <div class="page-header"><h2>Router Test</h2></div>
    </div>
    </div>

    <div class="row">
    <div class="col-xs-2 col-xs-offset-2">
    <div class="list-group">
    <!--生成路由链接-->
    <!--to="/about" 跟路由器后面的配置要一致-->
    <router-link to="/about" class="list-group-item">About</router-link>
    <router-link to="/home" class="list-group-item">Home</router-link>
    </div>
    </div>
    <div class="col-xs-6">
    <div class="panel">
    <div class="panel-body">
    <!--显示当前组件-->
    <router-view></router-view>
    </div>
    </div>
    </div>
    </div>
    </div>
    </template>

    <script>
    export default {}
    </script>

    <style>

    </style>

     ============================================================================================================

    最终页面展示显示不出来右边组件的内容:

     错误原因:路径写错了

     页面正常显示:

    ===========================================================================================================

    总结: 编写使用路由的 3 步

    1) 定义路由组件
    2) 注册路由
    3) 使用路由
    <router-link>
    <router-view>
  • 相关阅读:
    JAVA-初步认识-第三章-语句-switch
    JAVA-初步认识-第三章-if语句练习-星期和季节
    第三章-数据类型(3.3)
    JAVA-初步认识-第三章-局部代码块
    JAVA-初步认识-第三章-语句-if格式3
    JAVA-初步认识-第三章-语句-if格式1的演示
    JAVA-初步认识-第三章-语句-if格式2
    微信小程序图片使用示例
    推荐一款稳定快速免费的前端开源项目 CDN 加速服务
    基于mpvue的小程序项目搭建的步骤
  • 原文地址:https://www.cnblogs.com/curedfisher/p/12272098.html
Copyright © 2011-2022 走看看