Vue3.0——公共数据配置、网络配置、插件配置——use语法、路由配置

目录

一、公共数据配置

二、网络配置

1、代理配置:

2、网络配置:

三、插件配置——use语法

三、路由配置

---

一、公共数据配置

Vue3.0中setup中没有了this，那么有些东西配置到原型链上，就没有意义了

就需要配置全局

app.config.globalProperties.$shuju=公共数据   //对整个应用的配置

因为v2使用公共配置时一般绑定在原型上无论是否使用都在每一个组件的this链上,这样的设计不太友好,

v3提供了专门公共数据配置的方式:

globalProperties getCurrentInstance（获取当前组件）

钩子函数中才能获取实例，普通函数不行,会返回nulll

如果使用的是setup语法糖，getCurrentInstance就只能在<script setup>中

//main.js
const app=createApp(App)

app.config.globalProperties.$shuju=公共数据

//组件中钩子中:
//getCurrentInstance()获取当前组件实例对象
//当前组件的实例对象解构的proxy对象中就有$hqyj
//注意点是这个函数要在组件钩子中使用,不要在普通函数中使用

<script setup>
	import {onBeforeMount,getCurrentInstance,effect} from "vue"
	 const { proxy } = getCurrentInstance();//正常使用:语法糖环境默认为setup钩子。在这里写，下面都能访问这个变量
	 
	 onBeforeMount(()=>{
	 	console.log(getCurrentInstance())//正常使用:标准钩子
	 })
	
	 effect(()=>{
	 	console.log(getCurrentInstance())//正常使用:副作用钩子
	 })

    let fn=()=>{
        console.log(getCurrentInstance())//错误使用:获取null,自定义函数
    }
</script>

main.js

import { createApp } from 'vue'
import App from './App.vue'
const app=createApp(App)
app.config.globalProperties.$shuju="200"
app.config.globalProperties.rank="2"
app.mount("#app")

App.vue

<script setup>
import {getCurrentInstance} from "vue"
let zujian=getCurrentInstance()
console.log(zujian,zujian.proxy.$shuju,zujian.proxy.rank)
</script>
<template>
  <div>
  </div>
</template>

二、网络配置

1、代理配置:

//vite环境:vite.config.js
export default defineConfig({
	plugins: [vue()],
	server: {
		// port:"8080",
		// host
		proxy: {
			'/api': {
				target: 'http://127.0.0.1:7001', // 代理的目标地址
				rewrite: (path) => path.replace(/^\/api/, '/'), // 路径重写
				changeOrigin: true,
				// secure: true, // target是否https接口
				// ws: true, // target是否代理websockets               
			}
		}
	}
})

//webpack环境不变: vue.confige.js
module.exports={
	lintOnSave:false,
	devServer:{
		port:"10086",
		host:"localhost",
		proxy:{
			"/":{
				target:"http://127.0.0.1:7001",
				changeOrigin:true,
				pathRewrite:{"^/":""}
			}
		}
	}
}

2、网络配置:

//mian.js
import axios from "axios"
const app=createApp(App)
axios.defaults.baseURL="http://127.0.0.1:7001/api"
app.config.globalProperties.$axios=axios
app.config.globalProperties.hqyj=666
app.mount('#app')

//组件.vue
<script setup>
	import {ref,reactive,computed,onBeforeMount,getCurrentInstance,effect} from "vue"	
    const { proxy } = getCurrentInstance();//注意在组件钩子中获取,不要在事件中
    let fn=()=>{
        proxy.$axios("/test")
    }

三、插件配置——use语法

同2.0一样use函数接受一个函数或者对象(对象有install函数)   然后会调用这个传入的回调函数  给它传参app对象,以此来实现第三方插件

//main.js文件
import { createApp} from 'vue'
import App from './App.vue'
const app=createApp(App)

import $tool from "./http/$tool.js"
app.use($tool)

import $axios from "./http/$axios.js"
app.use($axios)

app.mount('#app')

//$tool.js文件
function $tool (app){
	app.config.globalProperties.$tool ="5000e"
}
export default $tool ;


//$axios文件
import axios from "axios"
function $axios(app){
	axios.defaults.baseURL="http://127.0.0.1:5173/api"
	app.config.globalProperties.$axios=axios
}
export default $axios;


//组件中就可通过获取实例对象 来获取公共属性中的$hqyj的"5000e"  $axios的网络工具
//组件内:
//1.钩子函数中获取实例对象: 
//2.获取公共属性中的数据
<script setup>
	import {onMounted,getCurrentInstance} from "vue"
	// import axios from "axios"
	let {proxy}=getCurrentInstance()
	onMounted(async ()=>{
		//axios.defaults.baseURL="http://127.0.0.1:5173/api"		
		let res=await proxy.$axios('/test')//"http://127.0.0.1:5173/api/test"==>"http://127.0.0.1:7001/test"
		console.log(res,proxy.$hqyj,11111111111)
	})	

三、路由配置

导入项目中变化了

注册路由（父路由和子路由）不变

全局守卫、独享守卫、组件守卫  逻辑不变，语法略微调整

//路由文件
import { createRouter, createWebHistory } from 'vue-router'
const routes = [
  {
    path: '/',
    name: 'home',
    component: () => import('../views/Home.vue'),
      //独享守卫
    beforeEnter(to,from,next){
        next()
     }
  },
  {
    path: '/car',
    name: 'car',
    component: () => import('../views/Car.vue'),
	children:[
		{
		path: '/car/son1',
		name: 'son1',
		component: ()=>import("../views/Son1.vue")	
		}
	]
  }
]
const router = createRouter({
  history: createWebHistory(),
  routes
})
//全局守卫
router.beforeEach((to,from,next)=>{
	console.log()
	next()
})

router.beforeResolve((to,from,next)=>{
	next()
})

router.afterEach((to,from)=>{
	
})

export default router


//main.js文件
import router from "./router/index.js"
app.use(router)//记得在mount之前调用



//组件内部的使用
import {onBeforeRouteLeave,useRouter,useRoute} from "vue-router"
    let router=useRouter()

	let fn=()=>{
        let route=useRoute()	
	     console.log(route.query)
		router.push({path:"/car/son1",query:{id:123}})
	}
    
    //组件内的守卫钩子
    onBeforeRouteLeave((to,from,next)=>{
		console.log(66666,"离开")
		next()
	})

router-view和router-link组件不变