国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

  1. Toy模板網(wǎng)首頁
  2. >Toy博客

vue--router路由和前端狀態(tài) 管理

2年前作者：土豆片片分類：Toy博客閱讀(16)違法舉報

這篇具有很好參考價值的文章主要介紹了vue--router路由和前端狀態(tài) 管理。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點擊"舉報違法"按鈕提交疑問。

vue--router路由基本加載

可以分為四步 ：具體流程如下 ：

  • 安裝
    在命令行中 進(jìn)入到自己的項目目錄輸入一下命令 安裝依賴：

    npm install --save vue-router

  • 在需要用到路由跳轉(zhuǎn)的模塊中引用(本文是在在入口文件main.js 進(jìn)行設(shè)置)

    import router from ‘vue-router’
    Vue.use(router)

  • 配置路由文件，并在vue實例中注入

    // 配置路由
    var rt = new router({
    routes: [
    // 可以定義多個路由
    {
    path: ‘/hello’, //指定要跳轉(zhuǎn)的路徑
    component: HelloWorld //指定要跳轉(zhuǎn)的組件
    }
    ]
    })

    /* eslint-disable no-new */
    new Vue({
    el: ‘#app’,
    // 注入到實例
    router: rt,
    components: { App },
    template: ‘’
    })

  • 確定視圖加載的位置

vue--router路由和前端狀態(tài) 管理,前端,前端,vue.js,javascript

image.png

具體代碼：

GIFx.gif

vue--router路由的跳轉(zhuǎn)

首先在路由模塊router中定義路由

定義要跳轉(zhuǎn)的組件：

image.png

開始跳轉(zhuǎn)

image.png

效果動圖：

GIF動圖.gif

vue-router路由參數(shù)的傳遞
第一步

  • 一.必須在路由內(nèi)加入路由的name

  • 二.必須在path后加/: +傳遞的參數(shù)

    // 不論在那個模塊中使用 必須首先引入
    import Vue from ‘vue’
    import router from ‘vue-router’
    import HelloWorld from ‘…/components/HelloWorld’
    import HelloEarth from ‘…/components/HelloEarth’
    // 使用
    Vue.use(router)

    // 配置路由 ----- export default 一個模塊像被其他模塊引用 首先要導(dǎo)出

    export default new router({
    routes: [
    // 可以定義多個路由
    {
    //定義name
    name: ‘helloworld’,
    path: ‘/helloworld/:worldmsg’, //指定要跳轉(zhuǎn)的路徑 /: 后面是要傳遞的參數(shù)
    component: HelloWorld //指定要跳轉(zhuǎn)的組件
    }, {
    //定義name
    name: ‘helloearth’,
    path: ‘/helloearth/:earthmsg’, //指定要跳轉(zhuǎn)的路徑 /: 后面是要傳遞的參數(shù)
    component: HelloEarth //指定要跳轉(zhuǎn)的組件
    },

    ]

    })

第二步 在:to后面設(shè)置 需要傳遞的參數(shù)
<template>
    <ul>
        <li>
            <!-- 在:to后面設(shè)置 需要傳遞的參數(shù) -->
            <router-link :to="{name:'helloworld',params:{worldmsg:'你好時節(jié)'}}">Hello World</router-link>
        </li>
        <li>
             <router-link :to="{name:'helloearth',params:{earthmsg:'你好地丟'}}">Hello Earth</router-link>
        </li>
    </ul>
</template>
<script>
export default {
    name : "list"
}
</script>
<style lang="">
    
</style>
第三步渲染到頁面上

固定格式為：
讀取參數(shù)： $route.params.XXX

 <h3>{{$route.params.worldmsg}}</h3>
  <h3>{{$route.params.earthmsg}}</h3>
Axios之get請求詳解

可以分為幾步：具體如下

  • 安裝

    npm install axios

  • 在項目中引入加載

    import axios from ‘a(chǎn)xios’

  • 將axios全局掛載到Vue實例上
    $http是你自己起的名字

    Vue.prototype.$http = axios

  • 發(fā)送請求 （此處以cnode社區(qū)api為例）
    使用CNODE社區(qū)官方的API為例展開學(xué)習(xí)
    獲取主題列表API：https://cnodejs.org/api/v1/topics
    參數(shù)：page頁碼
    limit 每頁顯示的數(shù)量

    //使用傳統(tǒng)的function

    我是axios 用來發(fā)送請求 和 攔截響應(yīng)

可以設(shè)置參數(shù) 在url后面設(shè)置 也可以在鏈接上設(shè)置參數(shù) ?page:1&limit:10

.then(function(res){
        // 注意此處的this不是當(dāng)前的Vue實例 需要在前面賦值一下 注意 后臺請求的數(shù)據(jù)是數(shù)組  需要遍歷一下  在進(jìn)行操作    this es6語法 則會直接繼承父元素 .then(res=>{this.items = res.data.data  console.log(res.data.data})
        self.items = res.data.data
            console.log(res.data.data)
      })
      .catch(function(err){
        console.log(err)
      })
Axios之post請求詳解

POST傳遞數(shù)據(jù)有兩種格式：
form--data ?page=1&limit=48
x-www--form--urlencoded { page: 1,limit: 10 }
在axios中，post請求接收的參數(shù)必須是form--data
要安裝qs插件—-qs.stringify
具體如下：
在當(dāng)前項目中安裝qs插件

npm install qs

在當(dāng)前項目模塊中引入

import qs from 'qs'


postData(){
      var self = this;
      // 可以設(shè)置參數(shù)  在url后面設(shè)置  也可以在鏈接上設(shè)置參數(shù)   ?page:1&limit:10
      this.$http.post('https://cnodejs.org/api/v1/topics',qs.stringify(
        {
          page:1,
          limit:10
        }
      ))
      .then(function(res){
        // 注意此處的this不是當(dāng)前的Vue實例 需要在前面賦值一下 注意 后臺請求的數(shù)據(jù)是數(shù)組  需要遍歷一下  在進(jìn)行操作    this es6語法 則會直接繼承父元素 .then(res=>{this.items = res.data.data  console.log(res.data.data})
        self.items = res.data.data
            console.log(res.data.data)
      })
      .catch(function(err){
        console.log(err)
      })
    },
  },
Vuex之store

用來管理狀態(tài)，共享數(shù)據(jù)，在各個組件之間管理外部狀態(tài)，應(yīng)用場景 大型電商項目各個單頁面中共有的 登錄顯示狀態(tài)
如何使用？

  • 首先安裝插件：
    注意 install可以簡寫為 num i vuex

    npm i vuex

  • 第二步 在入口文件min.js引入vuex，并通過use方法使用它
    import Vuex from 'vuex'
    Vue.use(Vuex)

    // The Vue build version to load with the import command
    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    import Vue from ‘vue’
    import App from ‘./App’
    import router from ‘./router’
    import Vuex from ‘vuex’
    Vue.use(Vuex)

    // 創(chuàng)建狀態(tài)倉庫

    var store = new Vuex.Store({
    state: {
    num: 88
    }
    })
    Vue.config.productionTip = false
    /* eslint-disable no-new */
    new Vue({
    el: ‘#app’,
    router,
    // 注入
    store,
    components: { App },
    template: ‘’
    })

  • 第三步 創(chuàng)建狀態(tài)管理倉庫 并在實例中注入

    // 創(chuàng)建狀態(tài)倉庫
    var store = new Vuex.Store({
    state: {
    num: 88
    }
    })
    Vue.config.productionTip = false
    /* eslint-disable no-new */
    new Vue({
    el: ‘#app’,
    router,
    // 注入
    store,
    components: { App },
    template: ‘’
    })

  • 第四步 通過this.$sore.state.XXX直接拿到需要的數(shù)據(jù)
    注意本例狀態(tài)管理設(shè)置為 num ：88

    我是組件outter中的全局狀態(tài){{outNum}}

全局狀態(tài)

Vuex的相關(guān)操作

vuex狀態(tài)管理的流程
view———->actions(可包含異步)———–>mutations（只能同步）—–>state————->view
除了能夠獲取狀態(tài)如何改變狀態(tài)呢？小栗子：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
    // 創(chuàng)建狀態(tài)倉庫 
export default new Vuex.Store({
    state: {
        num: 88
    },
    // 改變狀態(tài) 但是mutation只能包含同步操作
    mutations: {
        // increase: function(state) {

        // } 下面是es6語法：
        increase(state) {
            state.num++
        },
        decrease(state) {
            state.num = state.num - 30
        }
    },
    // actions只能對mutations操作 actions可以包含異步操作，但是mutation只能包含同步操作
    actions: {
        // context 上下文對象
        decreaseAction(context) {
            // actions可以包含異步操作
            //   setTimeout(function() {
            //       context.commit('decrease')
            //   }, 1000)
            context.commit('decrease')
        }
    },
    // 處理狀態(tài)
    getters: {
        getNum(state) {
            return state.num > 0 ? state.num : 0;

        }
    }
})


調(diào)用 ：
this.$store.commit(increase);
此處的increase是你在mucations中定義的方法名

注意：actions提交的是mutation,而不是直接變更狀態(tài)
actions可以包含異步操作，但是mutation只能包含同步操作文章來源地址http://www.zghlxwxcb.cn/news/detail-784523.html

到了這里，關(guān)于vue--router路由和前端狀態(tài) 管理的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來自互聯(lián)網(wǎng)用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載，請注明出處： 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實不符，請點擊違法舉報進(jìn)行投訴反饋，一經(jīng)查實，立即刪除！

領(lǐng)支付寶紅包贊助服務(wù)器費用

相關(guān)文章

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請作者喝杯咖啡吧~博客贊助

支付寶掃一掃領(lǐng)取紅包，優(yōu)惠每天領(lǐng)

二維碼1

領(lǐng)取紅包

二維碼2

領(lǐng)紅包