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保持一致

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保持一致

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
        }
      ]
    }
  ]

2. router-link和router-view使用
   router-link：路由跳转的链接。有一个主要的参数就是to，并且必须是子组件的绝对地址。
   router-view：自动装载子组件内容

显示商品标题
显示商品图片

    

详细源代码

#  src/components/VideoList.vue

#src/components/VideoTitle.vue

#/src/components/VideoImage.vue

 # 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实例

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事例