vue学习进阶（vue cli,vue路由，vuex,网络请求封装axios）

最新推荐文章于 2024-04-14 12:56:46 发布

ascii01tyy

最新推荐文章于 2024-04-14 12:56:46 发布

阅读量222

点赞数

分类专栏：笔记文章标签： javascript vue

本文链接：https://blog.csdn.net/weixin_44204324/article/details/108377475

版权

笔记专栏收录该内容

17 篇文章 3 订阅

订阅专栏

vue cli官方教程
一、vue项目的创建
1、
VSCode搭建Vue项目（转载自(https://www.cnblogs.com/zyskr/p/10609288.html）
在这里插入图片描述

2、利用vue ui

二、vue路由的使用
根据不同路径显示不同内容。
官方vue路由教程文档
1、安装路由
步骤一：安装路由：npm install vue-router --save
步骤二：在模块化工程使用它（因为它是一个插件，所以可以通过Vue.use(VueRouter）来安装路由功能）

第一步：导入路由对象，并且调用Vue.use(VueRouter）
创建路由实例，并且传入路由映射配置
在Vue实例中挂载创建的路由实例

//router文件夹中的index.js

import Vue from 'vue'
import Router from 'vue-router'

//1、通过Vue.use(插件)，安装插件
Vue.use(Router)
//2、创建Router对象
const routes=[
  
]
const router=new Router({
  //配置路由和组件之间的映射关系
  routes
})
//3、将router对象挂载在Vue实例中(这里是在main.js中创建实例并挂载)

// 4. 也可以在该文件中直接创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
/*const app = new Vue({
  router
}).$mount('#app')*/

//导出路由实例
export default router

//main.js

import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false

new Vue({
  el: '#app',
  router:router,//3、将router对象挂载在Vue实例中
  components: { App },
  template: '<App/>'
})

2、使用路由
步骤一：创建路由组件
步骤二：配置路由映射：组件和路径映射关系
步骤三：使用路由：通过<router-link>和<router-view>

//App.vue文件

<template>
  <div id="app">
   <router-link to="/home">首页</router-link>
   <router-link to="/about">关于</router-link>
   
<!--用于占位，决定渲染出的组件在什么位置，这里是在链接router-link标签的下方，也可以放到上方-->
   <router-view></router-view>
  </div>
</template>

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

<style>

</style>

index.js文件配置：

import Vue from 'vue'
import Router from 'vue-router'
import Home from '../components/Home'
import About from '../components/About'

//1、通过Vue.use(插件)，安装插件
Vue.use(Router)

//2、创建Router对象
// 2.1定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象
const routes=[
  {
    path:"/home",
    component:Home
  },
  {
    path:"/about",
    component:About
  }
]
const router=new Router({
  //配置路由和组件之间的映射关系
  routes
})

export default router

一般情况下，我们希望用户直接进入网站首页，但默认情况是没有显示首页组件的，必须让用户点击才行。这时我们可以在路径配置中增加一个默认路径：const routes=[{path:'/', redirect:'/home'}].
路由模式默认为hash模式，可在路由实例中修改为history模式。

const router=new Router({
  //配置路由和组件之间的映射关系
  routes,
  mode:'history'//这个模式中路径中没有#
})

<router-link>的一些属性
tag属性可以指定<router-link>之后渲染成什么组件。
replace:不会留下history记录，所以在指定replace的情况下，后退键返回不能返回到上一个页面中。
active-class:当<router-link>对应的路由匹配成功时，会自动给当前元素设置一个router-link-active的class，设置active-class可以修改默认名称。

 <router-link to="/home" tag="button" replace>首页</router-link>

3、路由代码跳转

<template>
  <div id="app">
   <button @click="homeClick">首页</button>
   <button @click="aboutClick">关于</button>
   <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  components:{
    
  },
  methods:{
    homeClick:function(){
      this.$router.push('/home')
      //this.$router.replace('/home')
    },
    aboutClick:function(){
      this.$router.push('/about')
    }
  }
}
</script>

<style scoped>

</style>

4、动态路由
App.vue中添加：

<template>
  <div id="app">
   <router-link v-bind:to="'/user/'+userid">用户</router-link>
   <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return{
      userid:"lisi"
    }
  },
  components:{
    
  },
  methods:{
  }
}
</script>

在这里插入图片描述

user.vue文件，利用this.$route.params.userid获得当前路径中的userid。（我们可以在任何组件内通过 this.$router 访问路由器，也可以通过 this.$route 访问当前路由）

<template>
    <div>
        <h1>这是用户中心哈哈哈</h1>
        <p>{{userId}}</p>
    </div>
</template>
<script>
export default {
    name:"User",
    computed:{
        userId(){
            return this.$route.params.userid;
        }
    }
}
</script>

5、路由器懒加载
当打包构建应用时，一般情况js包会变的非常大，影响页面加载。为给客户更好的客户体验，首屏组件加载速度更快一些，解决白屏问题，所以使用懒加载。懒加载简单来说就是延迟加载或按需加载，即在需要的时候的时候进行加载。
懒加载的主要作用是将路由对应的组件打包成一个个的js代码块。只有在这个路由被访问时，才加载对应组件。
vue路由懒加载按需加载三种方式（转载）

const Home=()=>import('../components/Home')

之后再将它放到路由路径设置的component中。

6、路由的嵌套
嵌套路由（官方文档）
如以下情况所示：home中还有两个路由。
http://localhost:8080/home/news
http://localhost:8080/home/message

<!--Home.vue-->
<template>
    <div>
        <h1>这是首页哈哈哈</h1>
        <router-link to="/home/news">新闻</router-link>
        <router-link to="/home/message">消息</router-link>
        <router-view></router-view>
    </div>
</template>
<script>
export default {
    name:"Home"
}
</script>

//index.js文件的路由配置中加入以下语句
 {
    path:"/home",
    component:Home,
    children:[
      {
        path:'news',
        component:News
      },
      {
        path:'message',
        component:Message,
      }
    ]
  },

在这里插入图片描述
7、路由间的参数传递

传递参数主要有两种类型：params和query
params的类型：
-配置路由格式：/router/:id(在router的Index中可通过this.$route.params.id引用)
-传递的方式：在path后面跟上对应的值
-传递后形成的路径：/router/123,/router/abc
-例子：<router-link :to="'/user/'+userid">用户</router-link>
query的类型：
-配置路由格式：/router
-传递的方式：对象中使用query的key作为传递方式
-传递后形成的路径：/router?id=123
-例子：<router-link :to="{path:'/profile',query:{name:'why',age:18}}">档案</router-link>

URL中特殊字符的意思：

符号	描述
+	表示空格
？	分隔实际的URL与参数
&	URL中指定的参数之间的分隔符
=	URL中指定的参数的值
#	表示书签

8、vue-router全局导航守卫
$router:设置的实例路由（总）
$route:当前活跃的路由（单个）

在router文件的index.jd中：

router.beforeEach((to,from,next)=>{//从from跳转到to(格式为route)
//需要在route中添加meta{path:'',component:,meta：{title:'用户'}}
document.title=to.matched[0].meta.title;
next();//调用该方法，才能进入下一个钩子
})

9、vue-router-keep-alive
使用keep-alive,跳转路由时，不用销毁再重建了。

<keep-alive>
<router-view></router-view>
</keep-alive>

三、vuex
vuex官方文档
Vuex是一个专门为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件状态，并以相应的规则保证状态以一种可预测的方式发生变化。（状态在各个组件中共享）

例子：
可以通过 store.state 来获取状态对象，以及通过 store.commit 方法触发状态变更。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

1、有什么状态需要在多个组件间共享

比如用户登录状态（如token），用户名称、头像、地理位置等等。
比如商品的收藏、购物车中的物品等等

2、待补充

四、网络模块请求
axios菜鸟教程
1、安装框架

npm install axios --save

2、引入框架
在main.js中

import axios from 'axios'

3、axios的基本使用

//1、axios基本使用
axios({
  url:'http://123.207.32.32:8000/home/multidata',
  method:'get'
}).then(res=>{
  console.log(res)
})

axios({
  //url:'http://123.207.32.32:8000/home/data?type=sell&page=3'
  url:'http://123.207.32.32:8000/home/data',
  //专门针对get请求的参数拼接
  params:{
    type:'pop',
    page:1
  }

}).then(res=>{
  console.log(res)
})

//2、axios发送并发请求（同时发送两个请求）
// axios.all([axios({
//   url:'http://123.207.32.32:8000/home/multidata',
// }),axios({
//   url:'http://123.207.32.32:8000/home/data',
//   //专门针对get请求的参数拼接
//   params:{
//     type:'sell',
//     page:1
//   }
// })]).then(results =>{
//   console.log(results);
// })

//3、使用全局的axios和对应的配置在进行网络请求
axios.defaults.baseURL='http://123.207.32.32:8000'
axios.defaults.timeout=5000

axios.all([axios({
  url:'/home/multidata',
}),axios({
  url:'/home/data',
  //专门针对get请求的参数拼接
  params:{
    type:'sell',
    page:1
  }
})]).then(axios.spread((res1,res2) =>{
  console.log(res1);
  console.log(res2);
}))

//4、创建对应的axios实例
const instance1=axios.create({
  baseURL:'http://123.207.32.32:8000',
  timeout:5000,
  headers:{

  }
})
instance1({
  url:'/home/multidata'
}).then(res=>{
  console.log(res);
})

instance1({
  url:'/home/data',
  //专门针对get请求的参数拼接
  params:{
    type:'sell',
    page:1
  }
}).then(res=>{
  console.log(res);
})

4、模块封装（包括axios拦截器的使用）
封装request模块
新建request.js

import axios from 'axios'

export function request(config){
    //1、创建axios实例
    const instance=axios.create({
        baseURL:'http://123.207.32.32:8000',
        timeout:5000
    })
    //2、axios的拦截器
    //2.1请求拦截的作用
    instance.interceptors.request.use(aaa=>{
        console.log(aaa);
        //1、比如config中的一些信息不符合服务器的要求

        //2、比如每次发送网络请求时，都希望在界面中显示一个请求图标

        //3、某些网络请求（比如登录（token）），必须携带一些特殊信息
        return config;
    },err=>{
        console.log(err);
    })

    //2.2响应拦截
    instance.interceptors.response.use(res=>{
        console.log(res)
        return res.data
    },err=>{
        console.log(err)
    })

    //3、发送真正的网络请求（实际是一个promise对象）
    return instance(config)
}

在main.js中调用request函数并传入config参数之后，处理结果。

import Vue from 'vue'
import App from './App'
import router from './router'
import {request} from './network/request'

Vue.config.productionTip = false


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

request({
  url:'/home/multidata'
}).then(res=>{
  console.log(res)
}).catch(err=>{
  console.log(err)
})

ascii01tyy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue学习进阶（vue cli,vue路由，vuex,网络请求封装axios）

vue cli官方教程一、vue项目的创建1、VSCode搭建Vue项目（转载自(https://www.cnblogs.com/zyskr/p/10609288.html）2、利用vue ui
复制链接

扫一扫