vue路由，状态管理，网络请求

目录

一、vue-router基本使用

二、vue-router参数传递

三、vue-router导航守卫

四、状态管理

五、网络请求

---

Home | Vue Router (vuejs.org) 路由网站

Vue:在不同的vue之间跳转就使用路由，路由就是一个vue地址

整个的文件目录

 

一、vue-router基本使用

1、安装vue-router：npm install vue-router@4

2、创建路由，在src下创建新文件夹router，再建文件index.js。src下新建views,其中包括about和home,在里面都新建index.vue

import { createRouter, createWebHashHistory } from 'vue-router'

const routes=[{
    path:'/home',
    name:'home',
    component:()=>import('../views/home/index.vue')
},
{
    path:'/about',
    name:'about',
    component:()=>import('../views/about/index.vue')
}]

const router = createRouter({
    routes,
    history:createWebHashHistory()
})

export default router 

 

<script>

</script>

<template>
    <div class="app-container">
        about
    </div>
</template>

<style scoped>

</style>

​​​​​​​

<script>
export default{
    methods:{
        gotoAbout(){
            this.$router.push({path:'/about'})
        }
    }
}
</script>

<template>
    <div class="app-container">
        home
        <button @click="gotoAbout()">跳转到about</button>
    </div>   
</template>

<style scoped>
</style>

3、修改main.js中的内容，导入（import）路由并且使用

import { createApp } from "vue"
import parent from './parent.vue'
import router from "./router"

const app =createApp(parent)
app.use(router)
app.mount("#app")

4、在父vue中显示出来

<script>
</script>

<template>
<router-view></router-view>
</template>

<style scoped>
</style>

二、vue-router参数传递

1、使用路由传递数据，要先修改路由index.js

import { createRouter, createWebHashHistory } from 'vue-router'

const routes=[{
    path:'/home',
    name:'home',
    component:()=>import('../views/home/index.vue')
},
{
    path:'/about',
    name:'about',
    component:()=>import('../views/about/index.vue')
},
{
    path:'/about/:id',
    component:()=>import('../views/about/index.vue')
}]

const router = createRouter({
    routes,
    history:createWebHashHistory()
})

export default router 

2、在home/index.vue中，修改跳转路径

<script>

export default{
    methods:{
        gotoAbout(){
            this.$router.push({path:'/about/12'})
        }
    }
}
</script>
<template>
    <div class="app-container">
        home
        <button @click="gotoAbout()">跳转到about</button>
    </div>   
</template>


<style scoped>
</style>

3、在about/index.vue中

<script>
export default{
    data(){
        return{
            id:0
        }
    },
    created(){
        if(this.$route.params && this.$route.params.id){
            this.id=this.$route.params.id
        }
    }
}
</script>

<template>
    <div class="app-container">
        about<br>
        {{id}}
    </div>
</template>

<style scoped>

</style>

 4、结果

 

三、vue-router导航守卫

例：现在有些网页登陆之后才能访问下一个页面，导航守卫就是这个功能。

1. 在路由的index.js中加入

router.beforeEach((to,from) => {
    // ...
    //返回false以取消导航
    return true
})

2、当把false改为true时，页面就会显示出来

四、状态管理

State:全局状态管理，可以在vue之间共享数据。

1、在src中创建store文件夹，并且在里面建立index.js,再在main.js中全局注册

import { createStore } from 'vuex'

// 创建一个新的 store 实例
const store = createStore({
    //存放数据
  state () {
    return {
      count: 10
    }
  },
  //mutations里面存放操作state中数据的方法
  mutations: {
    increment (state) { //增加
        state.count++
    },
    substract (state) { //减少
        state.count--
  },
    setCount (state,payload) { //重新赋值
        state.count=payload
}
}
})
export default store

//main.js
import { createApp } from "vue"
import parent from './parent.vue'
import router from "./router"
import store from "./store"

const app =createApp(parent)
app.use(router)
app.use(store)
app.mount("#app")

  

2、在全局中显示，并且可以调用index.js命令，对原始数据进行修改。

<script>
import { useStore } from 'vuex'
const store=useStore()

export default{
    methods:{
        gotoAbout(){
            this.$router.push({path:'/about/12'})
        },
        updataCount(){ 
            this.$store.commit("setCount",100)
        }
    }
}
</script>
<template>
    <div class="app-container">
        home
        <hr>
        {{this.$store.state.count}}
        <hr>
        <button @click="gotoAbout()">跳转到about</button>
        <button @click="updataCount()">修改store中的count数据</button>
    </div>   
</template>


<style scoped>
</style>

 

3、在about/index.vue中写入该命令，也会显示，并且随重新赋值而变化

<script>
export default{
    data(){
        return{
            id:0
        }
    },
    created(){
        if(this.$route.params && this.$route.params.id){
            this.id=this.$route.params.id
        }
    }
}
</script>

<template>
    <div class="app-container">
        about<br>
        {{id}}<br>
        {{this.$store.state.count}}
    </div>
</template>

<style scoped>

</style>

五、网络请求

1、axios、get、post

安装：npm install axios

import { axios } from "axios"

const request=axios.create({
    baseURL:'' //指定某一请求的域名
})

//请求拦截器，发送请求之前的拦截器
axios.interceptors.request.use(function (config) {
    // Do something before request is sent
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });

//响应拦截器，收到服务器端响应之后触发该拦截器
axios.interceptors.response.use(function (response) {
    // Any status code that lie within the range of 2xx cause this function to trigger
    // Do something with response data
    return response;
  }, function (error) {
    // Any status codes that falls outside the range of 2xx cause this function to trigger
    // Do something with response error
    return Promise.reject(error);
  });
  export default request