|
目录
一、公共数据配置
二、网络配置
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组件不变
|