Vue.js 学习足迹(四)

编程导航

通过编程实现返回上一页丶返回首页丶下一页等页面导航

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请求数据

App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>

    <hr>
    <!--<ol>-->
      <!--&lt;!&ndash;将请求来的数据渲染到页面, picUrl为后台传过来的变量&ndash;&gt;-->
      <!--&lt;!&ndash;png3&ndash;&gt;-->
      <!--<li v-for="(item,index) in banner" :key="index">-->
        <!--<img v-lazy="item" :src="item.picUrl" width="200" alt="">-->
      <!--</li>-->
    <!--</ol>-->
    <hr>

    <!--点击按钮发起请求-->
    <button @click="send"> 发起请求 </button>

  </div>
</template>

<script>
export default {
  data(){
      return {
        banner:[]
      }
  },
    //钩子函数，用来请求接收数据,  get() 方法用于请求数据  then() 方法用于接收数据
    created(){
      //请求ip为47.96.29.109端口为6333的数据
      //   this.$jq.get('http://47.96.29.109:6333/users')
      //       .then((res)=>{
      //           console.log( JSON.parse(res) )
      //       });
        //png1



        //axios请求数据
        // this.$ajax.get('http://47.96.29.109/vueProject/vue.php?title=banner')
        //     .then((res)=>{
        //         //console.log( res.data );
        //         this.banner = res.data;
        //     })

        // png2
    },

    methods:{
      send(){
          let php = 'vue.php';
          let title = 'banner1';
          let url = php + '?title=' + title;

          //请求单条数据
          // this.$ajax.get('http://47.96.29.109/vueProject/' + url)
          //     .then((res)=>{
          //         console.log(res.data)
          //     })
          //png4


          //分发,axios请求接收多条数据
          this.$ajax.all([
              //此处省去http... 在引入axios处定义了默认基本url
              this.$ajax.get('vue.php?title=banner1'),
              this.$ajax.get('vue.php?title=banner2'),
              this.$ajax.get('vue.php?title=banner3'),

          ])
              .then(this.$ajax.spread((res1,res2,res3)=>{
                  console.log(res1.data),
                  console.log(res2.data),
                  console.log(res3.data)
              }))
              .catch((err)=>{
                  console.log(err)
              })
          //png5
      }
    }
}
</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>

index.js

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

Vue.use(Router);


import Axios from 'axios'
//挂载
Vue.prototype.$ajax = Axios;
Axios.defaults.baseURL = 'http://47.96.29.109/vueProject/';

import $ from 'jquery'
Vue.prototype.$jq = $;


export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

png1

png2

png3

png4

png5