路由 路由的传参 路由的嵌套 axios

路由:vue-router 带三方工具库

创建单页面应用  spa (single page application)

通过不同的URL访问不同的页面

下载:

npm install vue

npm install vue-router

1.制作一个简单的路由

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

</head>

<style>

* .router-link-active{

text-decoration: none;

  background: orange;

  color:black; }

  * .active{

  text-decoration: none;

  background: orange;

  color:black;

  }

</style>

<body>

<div class="itany">

<!-- 1.-->

<router-link to='/index'>首页</router-link>

<router-link to='/about'>详情页</router-link>

<!-- 盛放导航内容-->

<router-view></router-view>

</div>

<script src="vue.js"></script>

<script src="vue-router.js"></script>

<script>

// 2.创建组件

var Index={

template:`

<h1>我是首页</h1>

` }

var About={

template:`

<h1>我是详情页</h1>

` }

// 3.配置路由

const routes=[

{path:'/',component:Index},

{path:'/index',component:Index},

{path:'/about',component:About}

]

// 4.创建一个路由实例

const router=new VueRouter({

routes:routes, linkActiveClass:'active'

})

    // 5.把路由实例挂载到vue实例上

new Vue({

el:'.itany',

router:router

})

</script>

</body>

</html>


注释:点击之后可跳转,并出现自己所设置的样式

2.路由的传参:

查询字符串:

/user/regist?uname=jack&&upwd=123

接收:{{

route.params}}

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

</head>

<body>

<div class="itany">

<!-- 1.-->

<router-link to='/index'>首页</router-link>

<router-link to='/about'>详情页</router-link>

<router-view></router-view>

</div>

<script src="vue.js"></script>

<script src="vue-router.js"></script>

<script>

//  2.创建组件

            var Index={

                    template:`

                  <h1>这是首页</h1>

              `

                      }

    var About={

        template:`

            <div>

                <h1>这是用户页</h1>

              <ul>

                <li> <router-link to="/about/user?uname=jack&upwd=123">注册</router-link> </li>

                <li> <router-link to='/about/login/rose/456'>登录</router-link> </li>

              </ul>

                  <router-view></router-view>

                </div>

                      `

                    }

                      var User={

                      template:`

                          <div>

                          <h3>我是注册页</h3>

                            <a href="#">{{$route.query}}</a>

                            <ul>

                            <li>{{$route.query.uname}}</li>

                            <li>{{$route.query.upwd}}</li>

                            </ul>

                            </div>

                          `

                        }

                      var Login={

                template:`

                <div>

            <h3>我是登录页</h3>

            <a href="#">{{$route.params}}</a>

            <ul>

            <li>{{$route.params.userName}}</li>

                <li>{{$route.params.password}}</li>

                </ul>

                </div>

                  `

    }

//        3、配置路由

    const routes=[

        {path:'/',component:Index}, {path:'/index',component:Index},

        {

            path:'/about',

            component:About,

            children:[

            {path:'user',component:User},

            {path:'login/:userName/:password',component:Login},

    ]

        },

    ]

//        4.创建路由实例

const router=new VueRouter({

        routes:routes

    })

//        5.

new Vue({

        el:'#app',

        router:router//注册路由

    })

</script>

</body>

</html>


3.axios

vue中的ajax    插件

下载axios:

npm install axios

1.0  vue-resource

2.0 axios

安装http-server

npm install http-server -g

使用http-server 开启一个服务器


<!DOCTYPE html>Document

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

.router-link-active{

            text-decoration: none;

            background: orange;

            color:black;

        }

.active{

        text-decoration: none;

        background: orange;

        color:black;

    }

</style>

</head>

<body>

  <div class="itany">

<router-link to='/index'>首页</router-link>

  <router-link to='/about'>详情页</router-link>

<router-view></router-view>

</div>

<script src="vue.js"></script>

<script src="vue-router.js"></script>、

<script src="axios.js"></script>

<script>

//        2.创建组件

    var Index={

        template:`

          <h1>我是首页</h1>

    `

    }

    var About={

        template:`

        <div>

          <h1>我是详情页</h1>

          <table border=1 cellspacing=0>

            <thead>

                <tr>

                <td>编号</td>

                  <td>品名</td>

                  <td>单价</td>

                  <td>数量</td>

                  <td>小计</td>

                    </tr>

            </thead>

            <tbody>

              <tr v-for="value in fruList">

              <td>{{value.num}}</td>

              <td>{{value.pname}}</td>

              <td>{{value.price}}</td>

              <td>{{value.count}}</td>

              <td>{{value.sub}}</td>

                </tr>

            </tbody>

          </table>

        </div>

    `,

      data:function(){

            return{

                fruList:null

            }

        },

        mounted:function(){

            var self=this;

            axios({

            method:'get',//发送数据的方式

                url:'fruit.json'

            }).then(function(resp){

            console.log(resp.data)

                self.fruList=resp.data

            }).catch(function(err){//请求失败

            console.log(err)

            })

        }

    }

    //        3.配置路由

    const routes=[

        {path:'/',component:Index},

        {path:'/index',component:Index},

          {path:'/about',component:About}

    ]

//        4.创建一个路由实例

const router=new VueRouter({

        routes:routes,

        linkActiveClass:'active'


    })

//        5.把路由实例挂载到vue实例上

    new Vue({

        el:'.itany',

        router:router

    })

    </script>

</body>

</html>

json:

[

    {

    "num":1,

    "pname":"apple",

    "price":3,

    "count":4,

    "sub":12

    },

{

    "num":2,

    "pname":"pear",

    "price":4,

    "count":5,

    "sub":20

},

{

    "num":3,

    "pname":"orange",

    "price":5,

    "count":6,

    "sub":30

}

]

推荐阅读更多精彩内容

  • 路由:vue-router 带三方工具库创建单页面应用 spa (single page applicatio...
    纪美阅读 536评论 0 0
  • vue笔记 一.vue实例 vue的生命周期 beforeCreate(创建前), created(创建后), b...
    秋殇1002阅读 902评论 0 1
  • 相关概念 混合开发和前后端分离 混合开发(服务器端渲染) 前后端分离后端提供接口,前端开发界面效果(专注于用户的交...
    他爱在黑暗中漫游阅读 2,572评论 4 45
  • # 传智播客vue 学习## 1. 什么是 Vue.js* Vue 开发手机 APP 需要借助于 Weex* Vu...
    再见天才阅读 3,302评论 0 6
  • 小学低段(一二年级) 1《阿贝的荒岛》,[美]威廉·史塔克,二十一世纪出版社 2《尼瑙克山探险》,[美]娜塔莉·巴...
    石头960529阅读 973评论 0 0
  • 这篇文章说下OkHttp的基本用法,是最新的3哦,如果你在网上搜索OkHttp怎么使用发现有些类没有了可能是因为人...
    禅与计算机程序设计艺术阅读 2,431评论 0 5
  • 当我们谈论气质的时候,我们在谈论什么?一个人的眼神?脸色?气场?服装?思想? 曾经喜欢一个很有气质的女孩子,第一次...
    豁达Dana阅读 591评论 0 0
  • 前几天翻微博,有个帖子问:女人生气的原因都有哪些?有个人回复说:怀孕期间有次做梦梦到老公出轨了,气得哭醒了。醒来后...
    嘤说亲子阅读 674评论 0 0