Vue.js 學習足跡(四)
阿新 • • 發佈：2018-11-12
文章目錄
程式設計導航
通過程式設計實現返回上一頁丶返回首頁丶下一頁等頁面導航
1.index.js 配置路由規則
import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' import Goods from '../components/Goods' import News from '../components/News' Vue.use(Router); export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld }, { name:'Goods', path:'/Goods', component:Goods, }, { name:'News', path:'/News', component:News, }, ] })
2.App.vue 設定首頁跳轉頁面a標籤
<template> <div id="app"> <img src="./assets/logo.png"> <router-link :to="{name:'Goods'}">商品</router-link> <router-link :to="{name:'News'}">新聞</router-link> <router-view/> </div> </template> <script> export default { name: 'App' } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
3.建立component 新元件
Goods.vue
<template> <div class="hello"> 商品列表頁面 <button @click="prev">返回</button> <button @click="index">返回首頁</button> </div> </template> <script> export default { data(){ return { } }, methods:{ prev(){ //go()方法引數 -1:返回上一級 1:前進下一級 3:前進三級 this.$router.go(-1) }, index(){ //push方法準確定位返回的頁面,方法內參數是一個物件,可以新增路由引數 this.$router.push({name:'HelloWorld'}); } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> </style>
News.vue
<template>
<div class="hello">
新聞列表頁面
<button @click="prev">返回</button>
</div>
</template>
<script>
export default {
data(){
return {
}
},
methods:{
prev(){
this.$router.go(-1);
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
4.配置下一級頁面
HelloWorld.vue
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<button @click="next">前進</button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
msg: 'Welcome to Your Vue.js App'
}
},
methods: {
next() {
this.$router.go(1);
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
多檢視
App.vue作為主頁面框架可以構建多個router-view檢視
1.App.vue主框架下構造多檢視併為每個檢視設定樣式
App.vue
<template>
<div id="app">
<img src="./assets/logo.png">
<router-link :to="{name:'Goods'}">商品</router-link>
<router-link :to="{name:'News'}">新聞</router-link>
<!--檢視可以有多個,App.vue是主頁面的一個框架，多個檢視router-view構建主頁面各個部分-->
<!--router-view預設不給name值時，在路由配置中name鍵為default-->
<router-view class="view" name="header"/>
<router-view class="view"/>
<router-view class="view" name="footer"/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.view{
height:150px;
border:1px solid skyblue;
}
</style>
2.為每個檢視配置路由,index.js主要負責路由規則配置
index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Goods from '../components/Goods'
import News from '../components/News'
import hd from '../components/hd'
import con from '../components/content'
import ft from '../components/ft'
Vue.use(Router);
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
components:{
// name值 : 元件定義值
//name值header來自App.vue檢視,hd值來自引入模板設定的自定義模板別名
header:hd,
default:con,
footer:ft,
}
},
{
name:'Goods',
path:'/Goods',
component:Goods,
},
{
name:'News',
path:'/News',
component:News,
},
]
})
3.建立多檢視模板
hd.vue
<template>
<h2>這裡是頭部</h2>
</template>
<script>
export default {
name: "hd"
}
</script>
<style scoped>
</style>
content.vue
<template>
<h2>這裡是body部分</h2>
</template>
<script>
export default {
name: "content"
}
</script>
<style scoped>
</style>
ft.vue
<template>
<h2>這裡是底部</h2>
</template>
<script>
export default {
name: "ft"
}
</script>
<style scoped>
</style>
4.在index.js中引入模板
import hd from ‘…/components/hd’
import con from ‘…/components/content’
import ft from ‘…/components/ft’
巢狀路由
路由規則新增選項 children:[{},{},{}]
模擬手機類目巢狀
1.建立各種手機模板
huawei.vue
sanxing.vue
vivo.vue
mi.vue
2.構造路由規則
index.js
{
name:'phone',
path:'/phone',
component:Phone,
//路由巢狀，先匹配父路由在通過路由規則匹配子路由
children:[
{
name:'phone.huawei',
path:'huawei',
component:Huawei,
},
{
name:'phone.sanxing',
path:'sanxing',
component:Sanxing,
},
{
name:'phone.vivo',
path:'vivo',
component:Vivo,
},
{
name:'phone.mi',
path:'mi',
component:Mi,
children: [
{
name:'mi.details',
path:'mi.details',
component:MiDetails
}
]
}
]
},
3.引入各種手機的模板
import Sanxing from '../components/sanxing'
import Vivo from '../components/vivo'
import Mi from '../components/mi'
import MiDetails from '../components/MiDetails'
index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Goods from '../components/Goods'
import News from '../components/News'
import hd from '../components/hd'
import con from '../components/content'
import ft from '../components/ft'
//巢狀路由
import Phone from '../components/phone'
import Huawei from '../components/huawei'
import Sanxing from '../components/sanxing'
import Vivo from '../components/vivo'
import Mi from '../components/mi'
import MiDetails from '../components/MiDetails'
Vue.use(Router);
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
components:{
// name值 : 元件定義值
header:hd,
default:con,
footer:ft,
}
},
{
name:'Goods',
path:'/Goods',
component:Goods,
},
{
name:'News',
path:'/News',
component:News,
},
{
name:'phone',
path:'/phone',
component:Phone,
//路由巢狀，先匹配父路由在通過路由規則匹配子路由
children:[
{
name:'phone.huawei',
path:'huawei',
component:Huawei,
},
{
name:'phone.sanxing',
path:'sanxing',
component:Sanxing,
},
{
name:'phone.vivo',
path:'vivo',
component:Vivo,
},
{
name:'phone.mi',
path:'mi',
component:Mi,
children: [
{
name:'mi.details',
path:'mi.details',
component:MiDetails
}
]
}
]
},
]
})
4.在模板中構造跳轉標籤
注意:
1.template模板標籤中只能有一個根目錄 div代替 否則報錯
2.< router-view class=“phone”></ router-view >檢視必須新增，否則不顯示子模板中的內容
<template>
<div >
<h2>這裡是主體內容</h2>
<router-link :to="{name:'phone'}">手機類目</router-link>
<!--新增一個router-view用來裝phone.vue模板，否則不顯示模板內容-->
<router-view class="phone"></router-view>
</div>
</template>
content.vue
<template>
<div >
<h2>這裡是主體內容</h2>
<router-link :to="{name:'phone'}">手機類目</router-link>
<!--新增一個router-view用來裝phone.vue模板，否則不顯示模板內容-->
<router-view class="phone"></router-view>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>
phone.vue
<template>
<div>
<h1>手機批發市場</h1>
<router-link :to="{name:'phone.huawei'}">華為</router-link>
<router-link :to="{name:'phone.sanxing'}">三星</router-link>
<router-link :to="{name:'phone.vivo'}">Vivo</router-link>
<router-link :to="{name:'phone.mi'}">小米</router-link>
<!--新增一個router-view用來裝huawei.vue模板，否則不顯示模板內容-->
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "phone"
}
</script>
<style scoped>
</style>
mi.vue
<template>
<div>
<h2>小米銷售區</h2>
<router-link :to="{name:'mi.details'}">小米手機詳情</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "mi"
}
</script>
<style scoped>
</style>
axios
axios 是npm社群可以搜尋下載的一個模組,Vue框架中的ajax
axios的下載安裝
cd 到專案檔案下 npm install axios
或者 cnpm i axios -S
index.js
//引入axios
import Axs from 'axios'
Vue.prototype.$ajax = Axs;
jquery的下載與安裝
cnpm i jquery -S
index.js
import $ from 'jquery'
Vue.prototype.$ = $;
案例之axios請求資料
content.vue
<template>
<div>
<h2> 主體內容 </h2>
<button @click="send"> 發起請求 </button>
</div>
</template>
<script>
import { Toast } from 'mint-ui';
export default {
data(){
return {
banner:[],
activeName:'',
dialogVisible: false
}
},
methods:{
handleClick(){},
handleClose(done) {
this.$confirm('確認關閉？')
.then(_ => {
done();
})
.catch(_ => {});
},
send(){
let php = 'vue.php';
let title = 'banner1';
let url = php + '?title='+title
Toast('提示資訊');
/*this.$ajax.get('http://47.96.29.109/vueProject/'+url)
.then((res)=>{
console.log(res.data)
})*/
// 分發
this.$ajax.all([
this.$ajax.get('vue.php?title=banner'),
this.$ajax.get('vue.php?title=banner'),
this.$ajax.get('vue.php?title=banner'),
])
.then(this.$ajax.spread((res1,res2,res3)=>{
console.log(res1.data)
console.log(res2.data)
console.log(res3.data)
}))
.catch((err)=>{
console.log(err)
})
}
},
created(){
/* this.$.get('http://47.96.29.109:6333/users')
.then((res)=>{
//console.log( JSON.parse(res) )
});*/
/* this.$ajax.get('http://47.96.29.109/vueProject/vue.php?title=banner')
.then((res)=>{
//console.log( res.data );
this.banner = res.data
})*/
}
}
</script>
<style scoped>
ol{
width: 600px;
}
ol li{
float: left;
}
</style>
index.js
import Axios from 'axios'
Axios.defaults.baseURL = 'http://47.96.29.109/vueProject/';
Vue.prototype.$ajax = Axios;
import $ from 'jquery'
Vue.prototype.$ = $;