Vue

idea：插件vue

vue基礎

引用

采用cdn方式導入vue.js

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>

在script標簽內部編寫vue的model層結構

<script>
    var vm;
    vm = new Vue({
        //el:元素的意思
        el:"#app",
        //Model:數據
        data:{
            message:"hello,Vue!"
        }
    });
</script>

在body標簽內部編寫view層：模板

<div id="app">
    <span v-bind:title="message">
        鼠標懸停幾秒可以查看此處動態綁定的提示信息
    </span>
    <br>
    {{message}}
</div>


v-bind：綁定事件

注：數據的顯示都用{{ }}來進行頁面的顯示

循環和判斷

判斷

v-if實現

<div id="app">
    <h1 v-if="type==='A'">A</h1>
    <h1 v-else-if="type==='B'">B</h1>
    <h1 v-else>C</h1>
</div>

//js部分：
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
    var vm;
    vm = new Vue({
        el: "#app",
        data:{
            type: 'A'
        }
    });
</script>

循環

v-for實現

<div id="app">
    <li v-for="(item,index) in items">
        {{item.message}}---------{{index}}
    </li>
</div>

<!--    1.導入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
    var vm;
    vm = new Vue({
        el: "#app",
        data:{
            //設置數組進行遍歷
           items:[
               {message:'java'},
               {message:'前端'}
           ]
        }
    });
</script>

事件

v-on進行監控事件

<div id="app">
    <button v-on:click="sayHi">click me</button>
</div>

<!--    1.導入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
    var vm;
    vm = new Vue({
        el: "#app",
        data: {
            message:"愛情很美好，但你很短暫"
        },
        //方法必須定義在vue的methods對象中,v-on綁定事件
        methods: {
            sayHi:function (event){
                alert(this.message);
            }

        }
    });
</script>

數據的雙向綁定

實現在文本框、下拉框、選擇框輸入內容，頁面可以在另一位置同步顯示。

<div id="app">
<!--    輸入框-->
    文本<input type="text" v-model="message">{{message}}
    <br>
<!--    輸入區域-->
    文本<textarea v-model="message"></textarea>{{message}}
    <br>
<!--    單元框-->
    性別：
    <input type="radio" name="sex" value="男" v-model="gaozheng">男
    <input type="radio" name="sex" value="女" v-model="gaozheng">女
    <br>
    選中：{{gaozheng}}
    <br>
<!--    下拉框-->
    <select name="" id="" v-model="selected">
        <option value="" disabled>--請選擇--</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    選中：value={{selected}}
</div>

<!--    1.導入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
    var vm;
    vm = new Vue({
        el: "#app",
        data:{
            message: '',
            gaozheng: '',
            selected: ''
        }
    });
</script>

vue組件

vue中可以自定義組件，但需要使用props來進行接收，以此實現數據的傳遞

• 定義組件，組件內容為
• {{shuju}}
• ，通過v-bind:shuju來將gaozheng與component中的props綁定，而后將data數據傳遞到gaozheng組件，進而傳遞到
• {{shuju}}

<div id="app">
<!--    組件：傳遞給組件中的值：props來接收-->
    <gaozheng v-for="item in items" v-bind:shuju="item"></gaozheng>
</div>

<!--    1.導入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
    //定義一個vue組件component
    Vue.component("gaozheng",{
        props:['shuju'],
        //template：模板
        template: '<li>{{shuju}}</li>'
    });
    var vm = new Vue({
        el:"#app",
        data: {
            items: ["java","linux","前端"]

        }

    });
</script>

網絡通信-axios

Vue實例有一個完整的生命周期，也就是從開始創建、初始化數據、編譯模板、掛載DOM、渲染→更新→渲染、卸載等一系列過程，我們稱這是Vue的生命周期。通俗說就是Vue實例從創建到銷毀的過程，就是生命周期。
在Vue的整個生命周期中，它提供了一系列的事件，可以讓我們在事件觸發時注冊JS方法,可以讓我們用自己注冊的JS方法控制整個大局，在這些事件響應方法中的this直接指向的是Vue的實例。

• 先建立一個data.json

  {
    "name": "gaozheng",
    "age": "22",
    "sex": "男",
    "url":"https://www.baidu.com",
    "address": {
      "street": "青山",
      "city": "武漢",
      "country": "中國"
    },
    "links": [
      {
        "name": "bilibili",
        "url": "https://www.bilibili.com"
      },
      {
        "name": "baidu",
        "url": "https://www.baidu.com"
      },
      {
        "name": "cqh video",
        "url": "https://www.4399.com"
      }
    ]
  }
  

• 在創建demo頁面進行操作

  <div id="vue" v-clock>
      <div>{{info.name}}</div>
      <div>{{info.address}}</div>
      <a v-bind:href="info.url">百度</a>
  </div>
  
  <!--    1.導入vue.js-->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
  <script>
      var vm = new Vue({
          el:"#vue",
          data(){
              return{
                  //請求的返回參數格式必須和json字符串一樣
                  info:{
                      name: null,
                      address: {
                          street: null,
                          city: null,
                          country: null
                      },
                      url: null
                  },
              }
          },
          //鉤子函數,鏈式編程  es6的新特性
          mounted(){
              axios.get('data.json').then(response=>(this.info=response.data));
          }
      });
  </script>
  

計算屬性

計算屬性：計算出來的結果，保存在屬性中，在內存中運行：虛擬dom，可以想象成緩存。

計算屬性的主要特性就是為了將不經常變化的計算結果進行緩存，以節約我們的系統開銷;

計算屬性 computed：緩存，拿取速度快。調用時直接當成屬性調用

方法 methods：調用時，需要用方法來調。

<div id="vue">
    <h1>注意括號</h1>
    <p>now1:{{currentTime1()}}</p>
    <p>now2:{{currentTime2}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:"#vue",
        data: {
            message: "hello,gaozheng"
        },
        methods: {
            currentTime1: function(){
                return Date.now();//返回一個時間戳
            },
        },
        //計算屬性:methods和computed中的方法名不能重名，重名之后，只會調用methods中的方法
        computed: {
            currentTime2: function(){
                return Date.now();//返回一個時間戳
            },
        }
    });
</script>

內容分發

在Vue.js中我們使用 元素 作為承載分發內容的出口，稱其為插槽，可以應用在組合組件的場景中。

以刪除列表元素為例，使用vue進行操作。

組件無法直接就調用vue對象的實例。

<div id="vue">
   <todo>
       <todo-title slot="todo-title" v-bind:title="title"></todo-title>
       <todo-items slot="todo-items" v-for="(item,index) in todoItems"
                   v-bind:item="item" v-bind:index="index" 
                   v-on:remove="removeItems(index)" v-bind:key="index"></todo-items>
   </todo>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
    Vue.component("todo",{
        template: '<div>\
                        <slot name="todo-title"></slot>\
                        <ul>\
                            <slot name="todo-items"></slot>\
                         </ul>\
                     </div>'
    });

    Vue.component("todo-title",{
        props: ['title'],
        template: '<div>{{title}}</div>'
    });
    Vue.component("todo-items",{
        props: ['item','index'],
        //只能綁定當前組件的方法
        template: '<li>{{index}}---------{{item}} <button on-click="remove">刪除</button></li>',
        methods: {
            remove:function (index){
                //自定義事件分發
                this.$emit('remove',index);
            }
        }
    })

    var vm = new Vue({
        el:"#vue",
        data: {
            todoItems: ['java','linux','python'],
            title: "課程表"
        },
        methods: {
            removeItems:function (index){
                console.log("刪除了"+this.todoItems[index]+"OK");
                this.todoItems.splice(index,1);//一次刪除一個元素
            }
        }
    });
</script>

自定義事件

通過以上代碼不難發現，數據項在Vue的實例中，但刪除操作要在組件中完成，組件無法直接調用vue的實例，那么組件如何才能刪除Vue實例中的數據呢?此時就涉及到參數傳遞與事件分發了，Vue為我們提供了自定義事件的功能很好的幫助我們解決了這個問題;使用this.$emit(‘自定義事件名’,參數)；

Vue-cli

vue-cli 是官方提供的一個腳手架,用于快速生成一個 vue 的項目模板，就好比創建maven項目時選擇的web骨架項目，這個骨架項目就是腳手架，相當于是一個模板。

主要功能

• 同一目錄結構

• 本地部署

• 熱部署

• 單元測試

• 集成打包上線

環境

安裝

Nodejs： http://nodejs.cn/download/

安裝無腦下一步即可，可修改安裝位置。

驗證

cmd 下輸入 node -v,查看是否能夠正確打印出版本號即可!
cmd 下輸入 npm -v,查看是否能夠正確打印出版本號即可!

npm：相當于是一個軟件包管理工具。需要什么包就直接npm install

安裝Node.js淘寶鏡像加速器(cnpm)：加快下載速度

# -g 就是全局安裝
npm install cnpm -g
# 或使用如下語句解決 npm 速度慢的問題
npm install --registry=https://registry.npm.taobao.org

安裝位置為：C:\Users\gaozh\AppData\Roaming\npm，可進行查看安裝文件

安裝vue-cli

#在命令臺輸入
cnpm install vue-cli -g
#查看是否安裝成功
vue list

創建vue項目

創建項目初始化包

創建一個基于 webpack 模板的 vue 應用程序

# 這里的 myvue 是項目名稱，可以根據自己的需求起名
vue init webpack myvue

后續的選擇都選No，來自己進行構建。

初始化并運行

cd myvue
npm install
npm run dev

Webpack

WebPack 是一款模塊加載器兼打包工具，它能把各種資源，如 JS、JSX、ES6、SASS、LESS、圖片等都作為模塊來處理和使用。

注：在idea中使用命令行語句需要idea有管理員權限

安裝

npm install webpack -g
npm install webpack-cli -g

測試安裝

webpack -v
webpack-cli -v

webpack demo

1. 先在指定目錄下創建一個包 交由idea打開 會生成一個.idea文件 那么就說明該文件就交由idea負責

2. 在idea中創建modules包，再創建hello.js ，hello.js 暴露接口 相當于Java中的類

   exports.sayHi = function () {
       document.write("<h1>hello world</h1>")
   }
   

3. 創建main.js 當作是js主入口，main.js 請求hello.js 調用sayHi()方法

   let hello=require("./hello");
   hello.sayHi()
   

   4. 在主目錄創建webpack-config.js，webpack-config.js 這個相當于webpack的配置文件 enrty請求main.js的文件 output是輸出的位置和名字

module.exports = {
    entry: './modules/main.js',
    output: {
        filename: "./js/bundle.js"
    }
};

5、在idea命令臺輸入webpack命令

6、完成上述操作之后會在主目錄生成一個dist文件 生成的js文件夾路徑為/dist/js/bundle.js

7、在主目錄創建index.html 導入bundle.js

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="dist/js/bundle.js"></script>
</head>
<body>
</body>
</html>

vue-router

Vue Router是Vue.js官方的路由管理器（路徑跳轉）。它和Vue.js的核心深度集成，讓構建單頁面應用變得易如反掌。主要就是完成頁面跳轉。

安裝

npm install vue-router --save-dev

基于第一個vue-cli進行測試學習;先查看node_modules中是否存在 vue-router，vue-router 是一個插件包，所以我們還是需要用 npm/cnpm 來進行安裝的。安裝完之后去node_modules路徑看看是否有vue-router信息 有的話則表明安裝成功。

demo

1、 將之前案例由vue-cli生成的案例用idea打開；

2、 清理不用的東西 assert下的logo圖片 component定義的helloworld組件 我們用自己定義的組件；

3、清理代碼，清楚冗余代碼,在進行vue-rooter代碼補充；

注： index.html 調用 main.js 調用 App.vue

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>myvue</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

import Vue from 'vue'
import App from './App'
import router from './router' //自動掃描里面的路由配置

Vue.config.productionTip = false;

//在main.js中配置路由
new Vue({
  el: '#app',
  //配置路由
  router,
  components: { App },
  template: '<App/>'
})

<template>
  <div id="app">
  <h1>前端Vue非常好</h1>
  //在App.vue中使用路由
    <router-link to="/main">首頁</router-link>
    <router-link to="/content">內容頁</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
import Content from "./components/Content";
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>

//自己的組件
<template>
  <h1>內容頁</h1>
</template>

<script>
export default {
  name: "Content"
}
</script>

<style scoped>

</style>

//自己的組件
<template>
  <h1>首頁</h1>
</template>

<script>
export default {
  name: "Main"
}
</script>

<style scoped>

</style>

4、安裝路由,在src目錄下,新建一個文件夾 : router,專門存放路由，index.js(默認配置文件都是這個名字)

import Vue from "vue"
import VueRouter from "vue-router";

import Content from "../components/Content";
import Main from "../components/Main";
//安裝路由
//路由就是頁面跳轉的組件
Vue.use(VueRouter);

//配置導出路由
export default new VueRouter({
  routes:[
    {
      //路由路徑
      path: '/content',
      name: 'content',
      //跳轉的組件
      component: Content
    },
    {
      //路由路徑
      path: '/main',
      name: 'content',
      //跳轉的組件
      component: Main
    }
  ]
});

5、啟動測試,就可以實現頁面跳轉。

npm run dev

vue實戰案例

注：vue+elementUI組件庫，推薦使用npm安裝組件庫。

創建工程

按照創建vue-cli項目創建項目。

1、創建一個名為heool-vue的工程

vue init webpack hello-vue

2、安裝各種依賴：vue-router、element-ui、sass-loader 和 node-sass

# 進入工程目錄
cd hello-vue
# 安裝 vue-router
npm install vue-router --save-dev
# 安裝 element-ui
npm i element-ui -S
# 安裝依賴
npm install
# 安裝 SASS 加載器
cnpm install sass-loader node-sass --save-dev
# 啟動測試
npm run dev	

3、刪除不必要元素，創建views和router文件夾來存放視圖和路由，編寫實現代碼

1）自定義首頁：組件Main.vue

<template>
  <h1>首頁</h1>
</template>
<script>
export default {
  name: "Main"
}
</script>

<style scoped>
</style>

2）自定義登陸界面：組件Login.vue（使用的是element-ui中的代碼）

<template>
  <div>
    <el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box">
      <h3 class="login-title">歡迎登錄</h3>
      <el-form-item label="賬號" prop="username">
        <el-input type="text" placeholder="請輸入賬號" v-model="form.username"/>
      </el-form-item>
      <el-form-item label="密碼" prop="password">
        <el-input type="password" placeholder="請輸入密碼" v-model="form.password"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" v-on:click="onSubmit('loginForm')">登錄</el-button>
      </el-form-item>
    </el-form>

    <el-dialog
      title="溫馨提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <span>請輸入賬號和密碼</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">確 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      form: {
        username: '',
        password: ''
      },

      // 表單驗證，需要在 el-form-item 元素中增加 prop 屬性
      rules: {
        username: [
          {required: true, message: '賬號不可為空', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '密碼不可為空', trigger: 'blur'}
        ]
      },

      // 對話框顯示和隱藏
      dialogVisible: false
    }
  },
  methods: {
    onSubmit(formName) {
      // 為表單綁定驗證功能
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 使用 vue-router 路由到指定頁面，該方式稱之為編程式導航
          this.$router.push("/main");
        } else {
          this.dialogVisible = true;
          return false;
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.login-box {
  border: 1px solid #DCDFE6;
  width: 350px;
  margin: 180px auto;
  padding: 35px 35px 15px 35px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  box-shadow: 0 0 25px #909399;
}

.login-title {
  text-align: center;
  margin: 0 auto 40px auto;
  color: #303133;
}
</style>

3）創建路由：在router中創建index.js的vue-router路由配置文件

import Vue from 'vue'
import VueRouter from 'vue-router'

import Main from "../views/Main";
import Login from "../views/Login";
//使用
Vue.use(VueRouter);
//導出
export default new VueRouter({
  routes:[
    //首頁
    {
      path:'/main',
      component: Main
    },
    //登錄頁
    {
      path: '/login',
      component: Login
    },
  ]
})

4）在main.js中配置相關， main.js是index.html調用的，所以基本上所有東西都導出到這，

注意：一定不要忘記掃描路由配置并將其用到new Vue中。

import Vue from 'vue';
import App from './App';
import VueRouter from 'vue-router';
//掃描路由配置
import router from "./router"
//導入element-ui
import ElementUI from 'element-ui';
//導入element css
import 'element-ui/lib/theme-chalk/index.css';

//顯式安裝路由
Vue.use(VueRouter);
Vue.use(ElementUI);

new Vue({
  el: '#app',
  router,   //路由
  render: h => h(App)  //在ElementUI規定這樣使用
});

5）在App.vue中配置顯示視圖

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'App',
}
</script>

6）跳轉login頁面顯示結果頁面

注意：sass-loader和Node Sass可能需要降低版本，再重新cnpm install才可以成功

路由嵌套

嵌套路由又稱子路由

1、創建用戶信息組件，在 views/user 目錄下創建一個名為 Profile.vue 的視圖組件

<template>
<!--  所有的元素，必須不能直接在根節點下，必須放在變遷內-->
<!--  <div>-->
<!--    <h1>用戶信息</h1>-->
<!--    {{$route.params.id}}-->
<!--  </div>-->
  <div>
    <h1>用戶信息</h1>
    {{id}}
  </div>
</template>

<script>
export default {
  props:['id'],
  name: "UserProfile"
}
</script>

<style scoped>

</style>

2、在用戶列表組件在 views/user 目錄下創建一個名為 List.vue 的視圖組件

<template>
  <h1>用戶列表</h1>
</template>

<script>
export default {
  name: "UserList"
}
</script>

<style scoped>

</style>

3、 修改首頁視圖，我們修改 Main.vue 視圖組件，此處使用了 ElementUI 布局容器組件（增加導航欄和側邊欄）

<template>
    <div>
      <el-container>
        <el-aside width="200px">
          <el-menu :default-openeds="['1']">
            <el-submenu index="1">
              <template slot="title"><i class="el-icon-caret-right"></i>用戶管理</template>
              <el-menu-item-group>
                <el-menu-item index="1-1">
                <!--插入的地方-->
                  <router-link to="/user/profile">個人信息</router-link>
                </el-menu-item>
                <el-menu-item index="1-2">
                <!--插入的地方-->
                  <router-link to="/user/list">用戶列表</router-link>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="2">
              <template slot="title"><i class="el-icon-caret-right"></i>內容管理</template>
              <el-menu-item-group>
                <el-menu-item index="2-1">分類管理</el-menu-item>
                <el-menu-item index="2-2">內容列表</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>

        <el-container>
          <el-header style="text-align: right; font-size: 12px">
            <el-dropdown>
              <i class="el-icon-setting" style="margin-right: 15px"></i>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>個人信息</el-dropdown-item>
                <el-dropdown-item>退出登錄</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-header>
          <el-main>
          <!--在這里展示視圖-->
            <router-view />
          </el-main>
        </el-container>
      </el-container>
    </div>
</template>
<script>
    export default {
        name: "Main"
    }
</script>
<style scoped lang="scss">
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }
  .el-aside {
    color: #333;
  }
</style>

4、配置嵌套路由修改 router 目錄下的 index.js 路由配置文件，使用children放入main中寫入子模塊

import Vue from 'vue'
import VueRouter from 'vue-router'

import Main from "../views/Main";
import Login from "../views/Login";
import UserProfile from "../views/user/Profile";
import UserList from "../views/user/List";
//使用
Vue.use(VueRouter);
//導出
export default new VueRouter({
  routes:[
    //首頁
    {
      path:'/main',
      component: Main,//嵌套路由
      children: [
        {
          path:'/user/profile/:id',
          name:UserProfile,
          component:UserProfile,
          props:true
        },
        {
          path: '/user/list',
          component: UserList
        }
      ]
    },
    //登錄頁
    {
      path: '/login',
      component: Login,
    },
  ]
})

參數傳遞

分兩種取值方式，以profile文件傳遞id為例

第一種方式

1、修改路由配置, 主要是router下的index.js中的 path 屬性中增加了 :id 這樣的占位符，而后使用name來進行頁面的跳轉的根據。

{
	path: '/user/profile/:id', 
	name:'UserProfile', 
	component: UserProfile
}

2、傳遞參數：此時我們在Main.vue中的route-link位置處 to 改為了 :to，是為了將這一屬性當成對象使用，注意 router-link 中的 name 屬性名稱 一定要和 路由中的 name 屬性名稱 匹配，因為這樣 Vue 才能找到對應的路由路徑。

<!--name是組件的名字 params是傳的參數 如果要傳參數的話就需要用v:bind:來綁定-->
<router-link :to="{name:'UserProfile',params:{id:1}}">個人信息</router-link>

3、在要展示的組件Profile.vue中接收參數 使用 {{$route.params.id}}來接收

<!--  所有的元素，必須不能直接在根節點下，必須放在變遷內-->
<div>
<h1>用戶信息</h1>
{{$route.params.id}}
</div>

第二種方式：使用props減少耦合

1、修改路由配置 , 主要在router下的index.js中的路由屬性中增加了 props: true 屬性

{
	path: '/user/profile/:id', 
	name:'UserProfile', 
	component: UserProfile, 
	props: true
}

2、傳遞參數和之前一樣 在Main.vue中修改route-link地址

<!--name是組件的名字 params是傳的參數 如果要傳參數的話就需要用v:bind:來綁定-->
<router-link :to="{name:'UserProfile',params:{id:1}}">個人信息</router-link>

3、在Profile.vue接收參數為目標組件增加 props 屬性,之后在template中就可以直接用id取值

<template>
  <div>
    個人信息
    {{ id }}
  </div>
</template>
<script>
    export default {
      props: ['id'],
      name: "UserProfile"
    }
</script>
<style scoped>
</style>

組件重定向

注意：Vue 中的重定向是作用在路徑不同但組件相同的情況下

再定義一個goHome路徑，使goHome路徑指向main

{
  path: '/goHome',
  redirect: '/main'
}

使用的話，只需要在Main.vue設置對應路徑即可

<el-menu-item index="1-3">
    <router-link to="/goHome">回到首頁</router-link>
</el-menu-item>

路由鉤子和404

路由模式

• hash：路徑帶 # 符號，如 http://localhost/#/login

• history：路徑不帶 # 符號，如 http://localhost/login

  export default new Router({
    mode: 'history',
    routes: [
    ]
  });
  

404Demo

1、創建一個NotFound.vue視圖組件

<template>
    <div>
      <h1>404,你的頁面走丟了</h1>
    </div>
</template>
<script>
    export default {
        name: "NotFound"
    }
</script>
<style scoped>
</style>

2、修改路由配置index.js

import NotFound from '../views/NotFound'
{
   path: '*',
   component: NotFound
}

路由鉤子和異步請求

路由鉤子函數

beforeRouteEnter：在進入路由前執行
beforeRouteLeave：在離開路由前執行

路由鉤子使用

  export default {
    name: "UserProfile",
    beforeRouteEnter: (to, from, next) => {
      console.log("準備進入個人信息頁");
      next();
    },
    beforeRouteLeave: (to, from, next) => {
      console.log("準備離開個人信息頁");
      next();
    }
  }

參數說明：

to：路由將要跳轉的路徑信息
from：路徑跳轉前的路徑信息
next：路由的控制參數
next() 跳入下一個頁面
next(’/path’) 改變路由的跳轉方向，使其跳到另一個路由
next(false) 返回原來的頁面
next((vm)=>{}) 僅在 beforeRouteEnter 中可用，vm 是組件實例

在鉤子函數中使用異步請求

1、安裝axios

cnpm install --save vue-axios

2、main.js中引入axios

import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)

3、準備數據，使用之前的data.json，文件放在static/mock/data.json

4、在 beforeRouteEnter 中進行異步請求

  export default {
    //第二種取值方式
    // props:['id'],
    name: "UserProfile",
    //鉤子函數 過濾器
    beforeRouteEnter: (to, from, next) => {
      //加載數據
      console.log("進入路由之前")
      next(vm => {
        //進入路由之前執行getData方法
        vm.getData()
      });
    },
    beforeRouteLeave: (to, from, next) => {
      console.log("離開路由之前")
      next();
    },
    //axios
    methods: {
      getData: function () {
        this.axios({
          method: 'get',
			//參數查看地址
          url: 'http://localhost:8080/static/mock/data.json'
        }).then(function (response) {
          console.log(response)
        })
      }
    }
  }