Blogger Information
Blog 77
fans 0
comment 0
visits 55018
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
Vue3路由守卫、setup的写法及组件使用,初识axios
Jet的博客
Original
1594 people have browsed it

一、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);
  4. // 获取浏览器的存储
  5. if(to.path == '/my'){
  6. // 获取用户的信息,如果没有获取到,就返回上一页
  7. const user = window.localStorage.getItem('user');
  8. if(!user){
  9. //from.path; // 上一个页面
  10. alert('请您先登录!');
  11. window.location.href = from.path;
  12. }
  13. }
  14. // window.localStorage.setItem();
  15. })


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. },
  15. // 子路由的path,不能在前面加反斜杠/
  16. children: [
  17. {
  18. path: 'order',
  19. name: 'my_order',
  20. component: MyOrderView,
  21. },
  22. {
  23. path: 'config',
  24. name: 'my_config',
  25. component: MyConfigView
  26. },
  27. ]
  28. },
  29. })


二、Vue3组合Api

1、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);
  18. // 不能使用,需要使用必须return回去
  19. return{
  20. arr
  21. }
  22. }
  23. }
  24. </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>
Correcting teacher:PHPzPHPz

Correction status:qualified

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post