vue学习笔记（二）

6.Vue路由基础

不同的路由对应不同的内容或者页面的任务，分配给前端使用

6.1 动态路由匹配

6.1.1 单个参数

第一步：修改router目录下index.js文件

import Vue from 'vue'
import Router from 'vue-router'
import VideoList from '@/components/VideoList'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/video/:videoId', #路由对应地址
      name: 'VideoList', #路由名称
      component: VideoList #路由执行的代码
    }
  ]
})

第二步:修改commonents目录下路由对应的文件VideoList.vue
route.params.videoId 获取path中的动态内容，与router/index.js保持一致

<template>
    <div>
        <h4>这是视频列表页面</h4>
        <span>{{ $route.params.videoId }}</span>
    </div>
</template>
<script>
export default {
    data(){
        return{
            msg:''
        }
    }
}
</script>

6.1.2 多个参数

第一步：修改router目录下index.js文件

import Vue from 'vue'
import Router from 'vue-router'
import VideoList from '@/components/VideoList'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/video/:videoId/user/:userId', #路由地址，其中videoId为视频id，userId为用户id
      name: 'VideoList', #路由名称
      component: VideoList #路由执行的代码
    }
  ]
})

第二步:修改commonents目录下路由对应的文件VideoList.vue
route.params.videoId、route.params.userId 获取path中的动态内容，与router/index.js保持一致

<template>
    <div>
        <h4>这是视频列表页面</h4>
        <span>{{ $route.params.videoId }}</span>
        <span>{{ $route.params.userId }}</span>
    </div>
</template>
<script>
export default {
    data(){
        return{
            msg:''
        }
    }
}
</script>

6.2嵌套路由

6.2.1 什么是嵌套路由

路由嵌套路由

6.2.2 怎么实现嵌套路由

知识点总结：

  1. routes中的children
    路由配置路径为src/router/index.js，每个路由都可以配置自己的子路由，children中每个子路由都包括path／name/component三个字段，如下：
routes: [
    {
      path: '/video',
      name: 'VideoList',
      component: VideoList,
      children:[
        {
          path:'title',
          name:'title',
          component:Title
        },
        {
          path:'image',
          name:'image',
          component:Image
        }
      ]
    }
  ]
  1. router-link和router-view使用
    router-link：路由跳转的链接。有一个主要的参数就是to，并且必须是子组件的绝对地址。
    router-view：自动装载子组件内容
<router-link to="/video/title">显示商品标题</router-link>
<router-link to="/video/image">显示商品图片</router-link>
<div>
    <router-view></router-view>
</div>

详细源代码

#  src/components/VideoList.vue
<template>
    <div>
        <h4>这是视频列表页面</h4>
        <router-link to="/video/title">显示商品标题</router-link>
        <router-link to="/video/image">显示商品图片</router-link>
        <div>
            <router-view></router-view>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            msg:''
        }
    }
}
</script>

#src/components/VideoTitle.vue
<template>
    <div>
        这里是视频标题的子组件
    </div>
</template>
<script>
export default {
    data(){
        return{
            msg:"hello VideoTitle!"
        }
    }
}
</script>

#/src/components/VideoImage.vue
<template>
    <div>
        这里是视频图片的子组件
    </div>
</template>
<script>
export default {
    data(){
        return{
            msg:"hello VideoImage!"
        }
    }
}
</script>

 # src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import VideoList from '@/components/VideoList'
import Title from '@/components/VideoTitle'
import Image from '@/components/VideoImage'
Vue.use(Router)

export default new Router({
  mode:'history',
  routes: [
    {
      path: '/video',
      name: 'VideoList',
      component: VideoList,
      children:[
        {
          path:'title',
          name:'title',
          component:Title
        },
        {
          path:'image',
          name:'image',
          component:Image
        }
      ]
    }
  ]
})

6.3 编程式路由

6.3.1 什么是编程式路由

通过js来实现页面的跳转
实现方式：
1.router.push("name")
2.router.push({path:"name"})
3.router.push({path:"name?a=123"})或者router.push({path:"name",query:{a:123}})
4.router.go(1) 1代表前进一步，如果改成-1，则代表后退1步

6.4 命名路由和命名视图

7. element-UI使用

7.1 element-ui安装

npm install -g element-ui --save

7.2 element-ui导入

import ElementUI from 'element-ui'
Vue.use(ElementUI )

7.3 element-ui使用

参考
https://element.eleme.cn/#/zh-CN/component/installation

8. vue-resource和axios

8.1vue-resource

8.1.1 vue-resource安装

cnpm i vue-resource --save

8.1.2 vue-resource常用API方法

  • get(url, [options])
  • head(url, [options])
  • jsonp(url, [options])
  • delete(url, [options])
  • post(url, body, [options])
  • put(url, body, [options])
  • patch(url, body, [options])

7.1.3 vue-resource导入

import VueResource from 'vue-resource'
Vue.use(VueResource)

8.1.4 vue-resource实例

<template>
    <div class="hello">
        <h1>Vue-resource插件测试</h1>
        <el-button type="primary" v-on:click="get">Get请求</el-button>
        <el-button type="success" v-on:click="post">Post请求</el-button>
        <el-button type="danger" @click="jsonp">Jsonp请求</el-button>
        <div>
            <h2>{{ msg }}</h2>
        </div>
    </div>
</template>
<script>
export default {
    name:'hello',
    data(){
        return {
            msg: ""
        }
    },
    methods:{
        get:function(){
           this.$http.get('package.json',{
               params:{
                   userId:'101'
               },
               headers:{
                   token:'abcd'
               }
           }).then(res=>{
               this.msg = res.data
           },error=>{
               this.msg = error
           }) 
        },
        post:function(){
            this.$http.post('package.json',{
                userId:'101'
            },{
                headers:{
                    token:'sdasd135656544'
                }
            }).then(res=>{
                this.msg = res.data
            },error=>{
                this.msg = error
            })
        },
        jsonp:function(){
            this.$http.jsonp("http://wthrcdn.etouch.cn/weather_mini?citykey=101070101").then(res=>{
                this.msg = res.data
            },error=>{
                this.msg = error
            })
        }
    }
}
</script>

8.2 axios

8.2.1 axios安装

cnpm i axis --save

8.2.2 axios常用API方法

  • axios.request(config)
  • axios.get(url[,config])
  • axios.delete(url[,config])
  • axios.head(url[,config])
  • axios.options(url[,config])
  • axios.post(url[,data[,config]])
  • axios.put(url[,data[,config]])
  • axios.patch(url[,data[,config]])

8.2.3 axios导入

import axios from 'axios'
Vue.prototype.$axios = axios

8.2.4 axios事例

<template>
    <div class="app">
        <h1>axios插件测试</h1>
        <el-button type="primary" v-on:click="get">Get请求</el-button>
        <el-button type="success" v-on:click="post">Post请求</el-button>
        <el-button type="danger" @click="http">Http请求</el-button>
        <div>
            <h2>{{ msg }}</h2>
        </div>
    </div>
</template>
<script>
export default {
    data(){
      return {
          msg:''
      }  
    },
    methods:{
        get:function(){
            this.$axios.get("http://wthrcdn.etouch.cn/weather_mini",{
                params:{
                    citykey:'101070101'
                },
                headers:{
                    token:'wqeq2123'
                }
            }).then(res=>{
                this.msg = res.data
            }).catch(error=>{
                this.msg = error
            })
        },
        post:function(){
            this.$axios.post("package.json",{
                userId:"102"
            },{
                headers:{
                    token:"asdsadf"
                }
            }).then(res=>{
                this.msg = res.data
            }).catch(error=>{
                this.msg = error
            })
        },
        http:function(){
            this.$axios({
                url:"http://wthrcdn.etouch.cn/weather_mini",
                method:"get",
                params:{
                    citykey:'101070101'
                },
                headers:{
                    token:"eqewqewqe"
                }
            }).then(res=>{
                this.msg = res.data
            }).catch(error=>{
                this.msg = error
            })
        }
    }
}
</script>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

友情链接更多精彩内容