vue-router路由和前端状态管理

作者: 缺月楼 | 来源:发表于2019-09-14 22:22 被阅读0次

Vue 学习笔记 vue-router路由和前端状态管理
关于vue--路由（公众号开发总结）
简单实现vue-router
vue-router路由和前端状态管理
Vue router路由和前端状态管理
vue-router 路由和前端状态管理
前端路由和后端路由，前端渲染和后端渲染
vue基础
Vue 相关链接汇总
Vue 基础 - 前端路由

vue-router路由基本加载

可以分为四步：具体流程如下：

安装
在命令行中进入到自己的项目目录输入一下命令安装依赖：

npm install --save vue-router

在需要用到路由跳转的模块中引用(本文是在在入口文件main.js 进行设置)

import router from 'vue-router'
Vue.use(router)

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

// 配置路由
var rt = new router({
    routes: [
        // 可以定义多个路由
        {
            path: '/hello', //指定要跳转的路径
            component: HelloWorld //指定要跳转的组件
        }
    ]
})

/* eslint-disable no-new */
new Vue({
    el: '#app',
    // 注入到实例
    router: rt,
    components: { App },
    template: '<App/>'
})

确定视图加载的位置

 <router-view></router-view>

image.png

具体代码：

GIFx.gif

vue-router路由的跳转

首先在路由模块router中定义路由

定义要跳转的组件：

image.png
开始跳转

image.png
效果动图：

GIF动图.gif

vue-router路由参数的传递

第一步

一.必须在路由内加入路由的name
二.必须在path后加/: +传递的参数

// 不论在那个模块中使用 必须首先引入
import Vue from 'vue'
import router from 'vue-router'
import HelloWorld from '../components/HelloWorld'
import HelloEarth from '../components/HelloEarth'
// 使用
Vue.use(router)

// 配置路由 ----- export default   一个模块像被其他模块引用 首先要导出

export default new router({
    routes: [
        // 可以定义多个路由
        { 
//定义name
            name: 'helloworld',
            path: '/helloworld/:worldmsg', //指定要跳转的路径 /: 后面是要传递的参数
            component: HelloWorld //指定要跳转的组件
        }, {
//定义name
            name: 'helloearth',
            path: '/helloearth/:earthmsg', //指定要跳转的路径 /: 后面是要传递的参数
            component: HelloEarth //指定要跳转的组件
        },

    ]
})

第二步在`:to`后面设置需要传递的参数

<template>
    <ul>
        <li>
            <!-- 在:to后面设置 需要传递的参数 -->
            <router-link :to="{name:'helloworld',params:{worldmsg:'你好时节'}}">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>

第三步渲染到页面上

固定格式为：
读取参数： $route.params.XXX

 <h3>{{$route.params.worldmsg}}</h3>
  <h3>{{$route.params.earthmsg}}</h3>

Axios之get请求详解

可以分为几步：具体如下

安装

npm install axios

在项目中引入加载

import axios from 'axios'

将axios全局挂载到Vue实例上
$http是你自己起的名字

Vue.prototype.$http = axios

发送请求（此处以cnode社区api为例）
使用CNODE社区官方的API为例展开学习
获取主题列表API：https://cnodejs.org/api/v1/topics
参数：page页码
limit 每页显示的数量

//使用传统的function
<template>
  <div class="hello">
   <H3>我是axios  用来发送请求 和 拦截响应</H3>
   <button @click="getData">发送请求</button>
   <ul>
     <li v-for="(item,index) in  items" :key="index">
       {{item.title}}
     </li>
   </ul>
  </div>
</template>

<script>
// 下面用到了Vue 首先要引入 
import Vue from 'vue'
// 第一步 首先要安装  npm install axios
// 第二部 引入
import axios from 'axios'
// 第三步 将axios全局挂载到VUE原型上 $.后面随便命名 
Vue.prototype.$http = axios
export default {
  name: 'HelloWorld',
  data () {
    return {
     items : []
    }
  },
  methods: {
    // 发送请求 拦截响应的过程 当点击按钮时 请求 cnede社区主页内容 
    getData(){
      var self = this;
      // 可以设置参数  在url后面设置  也可以在链接上设置参数   ?page:1&limit:10
      this.$http.get('https://cnodejs.org/api/v1/topics',{
        params:{
          page:1,
          limit:10
        }
      })
      .then(function(res){
        // 注意此处的this不是当前的Vue实例 需要在前面赋值一下 注意 后台请求的数据是数组  需要遍历一下  在进行操作    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)
      })
    }
  },
}
</script>

可以设置参数在url后面设置也可以在链接上设置参数 ?page:1&limit:10

.then(function(res){
        // 注意此处的this不是当前的Vue实例 需要在前面赋值一下 注意 后台请求的数据是数组  需要遍历一下  在进行操作    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传递数据有两种格式：
form-data ?page=1&limit=48
xwww-form-urlencoded { page: 1,limit: 10 }
在axios中，post请求接收的参数必须是form-data
要安装qs插件—qs.stringify
具体如下：
在当前项目中安装qs插件

npm install qs

在当前项目模块中引入

import qs from 'qs'

postData(){
      var self = this;
      // 可以设置参数  在url后面设置  也可以在链接上设置参数   ?page:1&limit:10
      this.$http.post('https://cnodejs.org/api/v1/topics',qs.stringify(
        {
          page:1,
          limit:10
        }
      ))
      .then(function(res){
        // 注意此处的this不是当前的Vue实例 需要在前面赋值一下 注意 后台请求的数据是数组  需要遍历一下  在进行操作    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

用来管理状态，共享数据，在各个组件之间管理外部状态，应用场景大型电商项目各个单页面中共有的登录显示状态
如何使用？

首先安装插件：
注意 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)


    // 创建状态仓库 
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: '<App/>'
})

第三步创建状态管理仓库并在实例中注入

 // 创建状态仓库 
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: '<App/>'
})

第四步通过this.$sore.state.XXX直接拿到需要的数据
注意本例状态管理设置为 num ：88

<template>
  <div>
    我是组件outter中的全局状态{{outNum}}
  </div>
</template>
<script>
export default {
  name: 'outter',
  computed: {
    outNum: function () {
//直接通过this.$sore.state.XXX拿到全局状态 88
      return this.$store.state.num
    }
  },
}
</script>
<style lang="">
</style>

全局状态

Vuex的相关操作

vuex状态管理的流程
view———>actions(可包含异步)———–>mutations（只能同步）—–>state————>view
除了能够获取状态如何改变状态呢？小栗子：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
    // 创建状态仓库 
export default new Vuex.Store({
    state: {
        num: 88
    },
    // 改变状态 但是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')
        }
    },
    // 处理状态
    getters: {
        getNum(state) {
            return state.num > 0 ? state.num : 0;

        }
    }
})


调用 ：
this.$store.commit(increase);
此处的increase是你在mucations中定义的方法名

注意：actions提交的是mutation,而不是直接变更状态
actions可以包含异步操作，但是mutation只能包含同步操作

Vue 学习笔记 vue-router路由和前端状态管理
Vue 学习笔记十一、vue-router路由和前端状态管理什么是路由：网址 11.1 vue-router路...
关于vue--路由（公众号开发总结）
关于路由在router.js中引入vue和vue-router 路由模式前端路由就是一个前端不同页面的状态管理...
简单实现vue-router
vue-router 将路由引入到前端让构建单页应用变得简单，vue-router作为Vue的路由管理器，使我们在...
vue-router路由和前端状态管理
vue-router路由基本加载可以分为四步：具体流程如下：安装在命令行中进入到自己的项目目录输入一下...
Vue router路由和前端状态管理
11.1 vuerouter路由基本加载简单四步走安装引用配置路由文件，并在vue实例中注入确定视图加...
vue-router 路由和前端状态管理
vue-router Vue Router 是 Vue.js 官方的路由管理器。由前端来控制页面的跳转（但其...
前端路由和后端路由，前端渲染和后端渲染
1.vue-router和koa-router的区别 vue-router是前端路由，koa-router是后端路...
vue基础
vue全家桶 vue-cli 框架 vue vuex 状态管理 vue-router 路由 axios 请求...
Vue 相关链接汇总
官网 Vue 官网 Vuex 官网 (状态管理) Vue Router (路由管理) Vue Cli 相关 axi...
Vue 基础 - 前端路由
使用vue-router实现前端路由安装vue-router：配置路由文件，并在vue实例中导入：设置视图（...