Vue3路由守卫、setup的写法及组件使用，初识axio

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网
一、Vue3路由守卫
  • 主要用来通过跳转或者取消的方式来守卫导航
  • 有 前置守卫 和 后置钩子
  • 植入路由导航位置：全局导航、路由独享、组件及守卫
1、前置守卫：全局导航（ route/index.js 文件 ）
  1. const router = createRouter({
  2.   history: createWebHistory(import.meta.env.BASE_URL),
  3.   routes，
  4. }）;
2、增加全局导航
  1. router.beforeEach( (to,from)=>{
  2.   // 到达的页面
  3.   console.log(to);
  4.   // 从哪个页面跳转过来的
  5.   console.log(from);
  6. })

3、后置钩子，全局导航
  1. router.afterEach((to,from)=>{
  2.   console.log(to);
  3.   console.log(from);
  5.   // 获取浏览器的存储
  6.   if(to.path == '/my'){
  7.     // 获取用户的信息,如果没有获取到,就返回上一页
  8.     const user = window.localStorage.getItem('user');
  9.     if(!user){
  10.       //from.path;  // 上一个页面
  11.       alert('请您先登录!');
  12.       window.location.href = from.path;
  13.     }
  14.   }
  15.   // window.localStorage.setItem();
  16. })

4、路由独享
  • 把代码放置在具体路由里面
4.1、beforeEnter 前置守卫
  1. const router = createRouter({
  2.   history: createWebHistory(import.meta.env.BASE_URL),
  3.   routes: [
  4.     {
  5.       path: '/my',
  6.       name: 'my',
  7.       component: MyView,
  8.       // 全局导航
  9.       beforeEnter: (to,from)=>{
  10.         // 到达的页面
  11.         console.log(to);
  12.         // 从哪个页面跳转过来的
  13.         console.log(from);
  14.       },
  16.       // 子路由的path,不能在前面加反斜杠/
  17.       children: [
  18.         {
  19.           path: 'order',
  20.           name: 'my_order',
  21.           component: MyOrderView,
  22.         },
  23.         {
  24.           path: 'config',
  25.           name: 'my_config',
  26.           component: MyConfigView
  27.         },
  28.       ]
  29.     },
  30. })

二、Vue3组合Api1、setup的使用

3.2写法：

  1. <script setup>
  2.   let name = '欧阳克';
  3.   console.log(name);
  4. </script>

3.0写法：

  1. <template>
  2.   <div>{{ arr.miejueshitai }}</div>
  3.   <input type="text" v-model="arr.miejueshitai">
  4. </template>
  5. <script>
  6. // 在setup里,双向绑定,必须使用方法来处理一下
  7. import { reactive } from 'vue';
  8. export default{
  9.   setup(){
  10.     const name = '欧阳克';
  11.     // 用reactive 方法来处理双向绑定的数据
  12.     const arr = reactive({
  13.       ouyangke : '欧阳克',
  14.       zhutianpeng : '朱天蓬',
  15.       miejueshitai : '灭绝师太'
  16.     });
  17.     console.log(arr);
  19.     // 不能使用,需要使用必须return回去
  20.     return{
  21.       arr
  22.     }
  23.   }
  24. }
  25. </script>

  • 计算属性：
  1. <template>
  2.   <div>{{ arr.jisuan }}</div>
  3. </template>
  4. <script>
  5. import { computed } from 'vue';
  6. export default{
  7.   setup(){
  8.     const arr = reactive({
  9.       num1 : 2,
  10.       num2 : 5,
  11.       jisuan : computed ( ()=> {return arr.num1 * arr.num2})
  12.     });
  13.     // 不能使用,需要使用必须return回去
  14.     return{
  15.       arr
  16.     }
  17.   }
  18. }
  19. </script>

2、组件传值
  • defineProps
  1. <template>
  2.   <OyButton type="success">提交</OyButton>
  3. </template>
  4. <script setup>
  5.     const props = defineProps(['size', 'type']);
  6.     console.log(props.type);
  7. </script>

3、toRefs（数组）
  1. <template>
  2.   <div>{{ miejueshitai }}</div>
  3.   <input v-model="miejueshitai" />
  4. </template>
  5. <script>
  6. import { reactive, toRefs } from 'vue';
  7. export default{
  8.   setup(){
  9.     const name = '欧阳克';
  10.     // 用reactive 方法来处理双向绑定的数据
  11.     const arr = reactive({
  12.       ouyangke : '欧阳克',
  13.       zhutianpeng : '朱天蓬',
  14.       miejueshitai : '灭绝师太',
  15.     });
  16.     // 不能使用,需要使用必须return回去
  17.     return{
  18.       // es6的写法,展开对象
  19.       ...toRefs(arr)
  20.     }
  21.   }
  22. }
  23. </script>
  • […arr] : es6写法，展开对象
  • 导致input v-model无法双向绑定
  • toResf可解决此问题

4、ref（单个）
  1. <template>
  2.   <div>{{ num }}</div>
  3.   <input v-model="num" />
  4. </template>
  5. <script>
  6. import { reactive, toRefs, ref } from 'vue';
  7. export default{
  8.   setup(){
  9.     let num = ref(10);
  10.     // 不能使用,需要使用必须return回去
  11.     return{
  12.       // es6的写法,展开对象
  13.       ...toRefs(arr),
  14.       num
  15.     }
  16.   }
  17. }
  18. </script>

5、watch（监听）
  1. <template>
  2.   <div>{{ num1 }}</div>
  3.   <input v-model="num1" />
  4.   <div>{{ num2 }}</div>
  5.   <input v-model="num2" />
  6. </template>
  7. <script>
  8. import { reactive, toRefs, ref, watch } from 'vue';
  9. export default{
  10.   setup(){
  11.     let num1 = ref(10);
  12.     let num2 = ref(20);
  13.     watch(num1, (new1,old1)=>{
  14.       console.log(num1);
  15.       console.log(num1.value);
  16.       console.log(new1);
  17.       console.log(old1);
  18.     })
  19.     // 不能使用,需要使用必须return回去
  20.     return{
  21.       // es6的写法,展开对象
  22.       ...toRefs(arr),
  23.       num1,
  24.       num2
  25.     }
  26.   }
  27. }
  28. </script>

6、生命周期 生命周期 作用 Setup生命周期 beforeCreate 在创建组件之前调用 use setup created 组件创建完成调用 use setup beforeMount 模板挂载之前调用 onBeforeMount mounted 模板怪哉完成调用 onMounted beforeUpdate 改变内容之前调用 onBeforeUpdate update 改变内容之后调用 onUpdate beforeUnmount 组件销毁之前调用 onBeforeUnmount unmounted 组件销毁之后调用 onunmounted
三、axios
  • 1、安装axios：npm i axios -S

  • 2、运行：npm run dev

  • 3、多个接口使用

    1. <script>
    2. import axios from "axios";
    3. export default{
    4. setup(){
    5.   const create = axios.create({
    6.     baseURL : "https://www.php.cn/index.php/index"
    7.   });
    8.   create({
    9.     method : "POST",
    10.     url : "user/add_order",
    11.     data: {
    12.       uid : 100,
    13.       sid : 200
    14.     }
    15.   }).then( (res)=>{
    16.     console.log(res.request.responseText);
    17.   });
    18.   create({
    19.     method : "POST",
    20.     url : "user/get_order",
    21.     data: {
    22.       uid : 100,
    23.       sid : 200
    24.     }
    25.   }).then( (res)=>{
    26.     console.log(res.request.responseText);
    27.   });
    28. }
    29. }
    30. </script>
【感谢龙石为本站提供数据采集系统 http://www.longshidata.com/pages/government.html 】
更多阅读