WEB前端：vuejs全家桶（35）：模块化开发：vue-router模块化、自定义组件添加事件

一、模块化开发

vue init webpack-simple vue-cli-demo
cd vue-cli-demo
cnpm install
npm run dev

1. vue-router模块化

安装vue-router
cnpm install vue-router -S

1.1 编辑main.js

    使用vue-router、App.vue

1.2 编辑App.vue

编辑模板和数据

<template>
  <div id="app">
    {{msg}}
    <h3>
      <router-link to="/home">主页</router-link>
      <router-link to="/news">新闻</router-link>
    </h3>
    <div>
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </div>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js'
    }
  },
  mounted(){//监视路由路径
    console.log(this.$route);
  },
   watch:{//监视路由
    $route:function(newValue,oldValue){
      console.log('路由'+oldValue.path+'发生变化，跳转到：'+newValue.path);
    }
  },
}
</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;
}

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

1.3 在src新建components 目录，新建Home.vue,News.vue

1.4 在src新建router.config.js

引入新建的Home.vue,News.vue；
并配置路由。

import Home from './components/Home.vue'
import News from './components/News.vue'

export default {
    routes: [{
            path: '/home',
            component: Home
        },
        {
            path: '/news',
            component: News
        }
    ]
}

1.5 再次编辑main.js

引入router.config.js，
并创建路由实例

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import routerConfig from './router.config.js'

//使用VueRouter
Vue.use(VueRouter);


//创建路由实例
const router = new VueRouter(routerConfig);
new Vue({
    el: '#app',
    render: h => h(App),
    router

})

1.6编译运行

1.7监视路由路径

 mounted(){//监视路由路径
        console.log(this.$route);
      },
      watch:{//监视路由
    $route:function(newValue,oldValue){
      console.log('路由'+oldValue.path+'发生变化，跳转到：'+newValue.path);
    }
  },

---

---

2. axios模块化(ajax请求)

cnpm install axios -S

使用axios的两种方式：
    方式1：在每个组件中引入axios
    方式2：在main.js中全局引入axios并添加到Vue原型中

在这里插入代码片

方式1：在每个组件中引入axios

第1步：在目标设置按钮
第2步：引入aixos
第3步：发送请求

<template>
  <div id="app">
    {{msg}}
    <h3>
      <router-link to="/home">主页</router-link>
      <router-link to="/news">新闻</router-link>
    </h3>
    <div>
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </div>
    <hr>
    <!-- 第1步： -->
    <button @click="send">发送AJAX请求</button>

  </div>
</template>

<script>
// 第2步
import aixos from 'axios'
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js'
    }
  },
  mounted(){//监视路由路径
    console.log(this.$route);
  },
   watch:{//监视路由
    $route:function(newValue,oldValue){
      console.log('路由'+oldValue.path+'发生变化，跳转到：'+newValue.path);
    }
  },
// 第3步
  methods: {
    send(){
      axios.get('https://api.github.com/users/tangyang8942')
      .then(resp=>{
        console.log(resp.data);
      }).catch(err=>{
        console.log(err);
      });
    }
  },
}
</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;
}

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

---

方式2：在main.js中全局引入axios并添加到Vue原型中

一、在main.js中
第1步：引入axios
第2步：创建axios为$http

二、在App.vue中
第3步:发送请求

//一、在main.js中
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import routerConfig from './router.config.js'
// 第1步：引入axios
import axios from 'axios'

//使用VueRouter
Vue.use(VueRouter);

// 第2步：创建axios为$http
Vue.prototype.$http = axios;


//创建路由实例
const router = new VueRouter(routerConfig);
new Vue({
    el: '#app',
    render: h => h(App),
    router

})

//二、在App.vue中

<template>
  <div id="app">
    {{msg}}
    <h3>
      <router-link to="/home">主页</router-link>
      <router-link to="/news">新闻</router-link>
    </h3>
    <div>
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </div>
    <hr>
    <button @click="send">发送AJAX请求</button>

  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js'
    }
  },
  mounted(){//监视路由路径
    console.log(this.$route);
  },
   watch:{//监视路由
    $route:function(newValue,oldValue){
      console.log('路由'+oldValue.path+'发生变化，跳转到：'+newValue.path);
    }
  },
// 第3步:发送请求
  methods: {
    send(){
      this.$http.get('https://api.github.com/users/tangyang8942')
      .then(resp=>{
        console.log(resp.data);
      }).catch(err=>{
        console.log(err);
      });
    }
  },
}
</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;
}

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

---

3. 为自定义组件添加事件

<template>
  <div id="app">
    {{msg}}
    <h3>
      <router-link to="/home">主页</router-link>
      <router-link to="/news">新闻</router-link>
    </h3>
    <div>
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </div>
    <hr>
    <button @click="send">发送AJAX请求</button>
    <!-- // 使用MyButton.vue:第3步 -->
    <MyButton @click.native="send"></MyButton>

  </div>
</template>

<script>
// 使用MyButton.vue:第1步
import MyButton from './components/MyButton.vue'


export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js'
    }
  },
  mounted(){//监视路由路径
    console.log(this.$route);
  },
   watch:{//监视路由
    $route:function(newValue,oldValue){
      console.log('路由'+oldValue.path+'发生变化，跳转到：'+newValue.path);
    }
  },
// 第3步:发送请求
  methods: {
    send(){
      this.$http.get('https://api.github.com/users/tangyang8942')
      .then(resp=>{
        console.log(resp.data);
      }).catch(err=>{
        console.log(err);
      });
    }
  },
// 使用MyButton.vue:第2步
  components:{
    MyButton
  }
}
</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;
}

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>