6.Vue路由基礎(chǔ)
不同的路由對應(yīng)不同的內(nèi)容或者頁面的任務(wù)邪铲，分配給前端使用
6.1 動態(tài)路由匹配
6.1.1 單個參數(shù)
第一步：修改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', #路由對應(yīng)地址
name: 'VideoList', #路由名稱
component: VideoList #路由執(zhí)行的代碼
}
]
})
第二步:修改commonents目錄下路由對應(yīng)的文件VideoList.vue
route.params.videoId 獲取path中的動態(tài)內(nèi)容亚侠，與router/index.js保持一致
<template>
<div>
<h4>這是視頻列表頁面</h4>
<span>{{ $route.params.videoId }}</span>
</div>
</template>
<script>
export default {
data(){
return{
msg:''
}
}
}
</script>
6.1.2 多個參數(shù)
第一步：修改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 #路由執(zhí)行的代碼
}
]
})
第二步:修改commonents目錄下路由對應(yīng)的文件VideoList.vue
route.params.videoId曹鸠、route.params.userId 獲取path中的動態(tài)內(nèi)容躏碳，與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 怎么實現(xiàn)嵌套路由
知識點總結(jié)：
- 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
}
]
}
]
- router-link和router-view使用
router-link：路由跳轉(zhuǎn)的鏈接棵介。有一個主要的參數(shù)就是to，并且必須是子組件的絕對地址吧史。
router-view：自動裝載子組件內(nèi)容
<router-link to="/video/title">顯示商品標(biāo)題</router-link>
<router-link to="/video/image">顯示商品圖片</router-link>
<div>
<router-view></router-view>
</div>
詳細(xì)源代碼
# src/components/VideoList.vue
<template>
<div>
<h4>這是視頻列表頁面</h4>
<router-link to="/video/title">顯示商品標(biāo)題</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>
這里是視頻標(biāo)題的子組件
</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來實現(xiàn)頁面的跳轉(zhuǎn)
實現(xiàn)方式：
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代表前進(jìn)一步邮辽，如果改成-1，則代表后退1步
6.4 命名路由和命名視圖
7. element-UI使用
7.1 element-ui安裝
npm install -g element-ui --save
7.2 element-ui導(dǎo)入
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導(dǎo)入
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導(dǎo)入
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>
