Vue路由的分类与使用

最新推荐文章于 2024-10-04 00:46:18 发布

猿究院+

最新推荐文章于 2024-10-04 00:46:18 发布

阅读量620

点赞数 5

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_73638669/article/details/142185601

版权

watchEffect

立即运行一个函数，同时响应式的追踪其依赖，并重新执行函数

<template>
  <div>
    <h1>{{ num1 }} + {{ num2 }} = {{ num1 + num2 }}</h1>
    <button @click="changeNum1">num1++</button>
    <button @click="changeNum2">num2++</button>
  </div>
</template>
<script lang="ts" setup name="Person">
import {ref, watch, watchEffect} from "vue";
let num1 = ref(1);
let num2 = ref(3);

const changeNum1 = () => {
  num1.value += 1;
}

const changeNum2 = () => {
  num2.value += 1;
}
/*watch([num1, num2], (value) => {
  const [newNum1, newNum2] = value;
  console.log(newNum1, newNum2)
  if (newNum1 == 5 || newNum2 == 7) {
    console.log("数据到达");
  }
})*/
const stopWatch = watchEffect(() => {
  console.log(num1.value,num2.value)
  if (num1.value == 5 || num2.value == 7) {
    console.log("数据到达,停止监视");
    stopWatch();
  }
})


</script>

<style scoped>

</style>

标签ref属性

作用在普通的DOM上获取DOM节点，用在组件上获取组件实例
用于DOM 获取节点

 <h1 ref="title1">猿究院</h1>
 <h1 ref="title2">北大街</h1>
 <h1 ref="title3">Vue</h1>
 <input type="text" value="默认值" ref="ipt"/>
 
let title1 = ref();
let title2 = ref();
let title3 = ref();
let ipt = ref();

const showLog = () => {
  console.log(title1.value)
  console.log(title2.value)
  console.log(title3.value)
  //ipt  > RefImpl >value <input 对象 .value
  console.log(ipt.value.value)
}

ref作用于组件上

<Message ref="msg"></Message>

********* 子组件中
//使用defineExpose将组件的数据交给外部组件
defineExpose({title, desc})
*********
let msg = ref();
const getMessage = () => {
  console.log(msg.value.title)
  console.log(msg.value.desc)

}

props

<template>
  <Person :list="persons"></Person>
</template>
<script lang="ts" setup name="App">
import Person from "@/components/Person.vue";
import {reactive} from "vue";
import type {Persons} from "@/assets/IPersonInter";
import {nanoid} from "nanoid";

let persons = reactive<Persons>([
  {id: nanoid(), name: '张三', age: 20},
  {id: nanoid(), name: '李四', age: 19},
  {id: nanoid(), name: '王五', age: 25}
])

</script>
<style lang="scss" scoped>
</style>

<template>
  <ul v-if="list != undefined">
    <li v-for="(p,index) in list" :key="p.id">
      {{ p.name }} - {{ p.age }}
    </li>
  </ul>
  <div v-else>
    暂无数据
  </div>
</template>

<script lang="ts" setup name="Person">
import type {Persons} from "@/assets/IPersonInter";
//第一种写法
// const props = defineProps(['list']);

//第二种写法  接收 + 限制类型
// const props =defineProps<{list:Persons}>();

//第三种写法 接收 + 限制类型 + 指定默认值+限制必要性 (? 可以传 可不传)
const props = withDefaults(defineProps<{ list?: Persons }>(), {
  list: () => [{id: "001", name: '默认值', age: 0}]
});

//在setup中使用 接收到的数据时  需要通过 props对象 .
console.log(props.list)
</script>
<style scoped>
</style>

自定义的hook

本质是一个函数，把setup中的组合式 API进行封装。

hook 优势：让代码复用，让setup中的逻辑更清楚。

useDog.ts
import {onMounted, reactive} from "vue";
import axios, {AxiosError} from "axios";

export default function () {

    let dogList = reactive<string[]>([])

    async function getDog() {
        //发送请求
        try {
            let {data} = await axios.get("https://dog.ceo/api/breed/weimaraner/images/random");
            console.log("请求的结果：", data);
            dogList.push(data.message)
        } catch (error) {
            const err = <AxiosError>error;
            console.log(err.message)
        }
    }
    onMounted(() => {
        getDog();
    })
    return {dogList, getDog}
}
useSum.ts
import {ref, onMounted} from 'vue'
export default function () {

    let sum = ref(0);

    const increment = () => {
        sum.value += 1;
    }
    const decrement = () => {
        sum.value -= 1;
    }

    onMounted(() => {
        console.log("执行了useSum的onMounted")
        increment();
    })

    //向外暴露数据
    return {sum, increment, decrement}
}
Person.vue
<template>
  <h2>当前求和：{{ sum }}</h2>
  <button @click="increment">点我+1</button>
  <button @click="decrement">点我-1</button>
  <hr/>
  <button @click="getDog">再来一直狗子</button>
  <img style="width: 200px;" :src="(dog as string)" v-for="(dog,index) in dogList" :key="index">
</template>

<script lang="ts" setup name="Person">
import useSum from "@/assets/useSum";
import {onMounted} from "vue";
import useDog from "@/assets/useDog";

let {sum, increment, decrement} = useSum();
let {dogList, getDog} = useDog();

onMounted(() => {
  console.log("我是person组件的onMounted")
})

</script>
<style scoped>
</style>

路由

1.安装 npm install vue-router@4
2.使用在 src/router/index.ts文件

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

//被路由的组件
import Home from "@/components/Home.vue";
import About from "@/components/About.vue";


const router = createRouter({
    history: createWebHistory(),
    routes: [
        {
            path: "/",  默认访问
            component: Home
        },
        {
            path: '/home',
            component: Home
        },
        {
            path: '/about',
            component: About
        }
    ]
})

export default router;


 <!--  声明式路由 -->
 <RouterLink to="/home">Home</RouterLink>
 <RouterLink to="/about">About</RouterLink>
 <hr/>
 <!--  被路由的组件 会显示在 RouterView -->
 <RouterView></RouterView>

路由的模式

1.history （createWebHistory） URL地址更加美观不带# 更加接近传统的URL。

后期上线后需要后台配合处理路径问题否则刷新可能会有404错误

2.createWebHashHistory 兼容性更好，后期不需要后台的处理

to属性的两种写法

 to 字符串写法
 <RouterLink to="/home">Home</RouterLink>
 to对象写法

嵌套路由

router/index.ts

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

//被路由的组件
import Home from "@/components/Home.vue";
import About from "@/components/About.vue";
import News from "@/components/News.vue";
import Detail from "@/components/Detail.vue";


const router = createRouter({
    history: createWebHashHistory(),
    routes: [
        {
            path: "/",
            component: Home
        },
        {
            path: '/home',
            component: Home,
            children: [  嵌套路由
                {
                    path: "news",  路径前不加/
                    component: News,
                    children: [
                        {
                            path: "detail",
                            component: Detail
                        }
                    ]
                }
            ]
        },
        {
            path: '/about',
            component: About
        }
    ]
})

export default router;


使用 
news.vue
<!--  导航-->
to:需要写全路径
<RouterLink to="/home/news/detail">Detail</RouterLink>
<!--  展示被路由的组件-->
<RouterView></RouterView>

命名路由

在路由配置文件新增属性（name）

  {
  path: "news",
  component: News,
  children: [
      {
      path: "detail",
      name:'xq',
      component: Detail
      }
  ]
  }

使用

<!-- 使用命名路由 需要对象写法的to属性  -->
  <RouterLink :to="{
    name:'xq'
  }">Detail
  </RouterLink>

路由懒加载

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

// //被路由的组件
// import Home from "@/components/Home.vue";
// import About from "@/components/About.vue";
// import News from "@/components/News.vue";
// import Detail from "@/components/Detail.vue";

const router = createRouter({
history: createWebHashHistory(),
 routes: [
     {
         path: "/",
         component: () => import('@/components/Home.vue')
     },
     {
         path: '/home',
         component: () => import('@/components/Home.vue'),
         children: [
             {
                 path: "news",
                 component: () => import('@/components/News.vue'),
                 children: [
                     {
                         path: "detail",
                         name: 'xq',
                         component: () => import('@/components/Detail.vue')
                     }
                 ]
             }
         ]
     },
     {
         path: '/about',
         component: () => import('@/components/About.vue')
     }
    ]
})

export default router;

路由重定向

 {
 path: "/",
 component: () => import('@/components/Home.vue'),
 redirect: to => {
    // 方法接收目标路由作为参数
    // return 重定向的字符串路径/路径对象
    return {
        // path:"/home/news/detail"
        name:'xq' //命名路由
    }
}
},
            
            
            
 {
 path: "/",
 component: () => import('@/components/Home.vue'),
 redirect: { // path:"/home/news/detail"
              name:'xq' //命名路由
                }
},

路由传参

1.query传参

<RouterLink to="/home/news/detail?id=1&title=测试数据A">Detail</RouterLink>

  <!--  <RouterLink :to="{name:'xq',query:{id:2,title:'测试数据B'}}">-->
  <!--    Detail-->
  <!--  </RouterLink>-->
接收
import {useRoute} from "vue-router";

const route = useRoute();

{{route.query.参数名}}-{{route.query.title}}2.

2.params传参

1.index.ts中  路由配置占位符
  {
    path: "news",
      component: () => import('@/components/News.vue'),
      children: [
          {
              path: "detail/:id/:title", 占位符
              name: 'xq',
              component: () => import('@/components/Detail.vue')
          }
      ]
  }
使用
<!--params 传参  字符串写法-->
<RouterLink to="/home/news/detail/1/测试数据A">Detail</RouterLink>
  <!-- params 传参 使用命名路由 需要对象写法的to属性  -->
<RouterLink :to="{name:'xq',params:{id:2,title:'测试数据B'}}">
      Detail
    </RouterLink>
    
接收
import {useRoute} from "vue-router";

const route = useRoute();
接收属性
route.params.属性名

简化接收参数的方式路由的props

ruter/index.ts
  path: "detail/:id/:title",
  name: 'xq',
  component: () => import('@/components/Detail.vue'),
  
  props:{id:'0000',title:'暂无数据'} // 固定值
  //props 布尔写法 将收到的params参数作为 props传入组件
  props:true
props 函数写法
props(route) {
 return route.query;
  }

replace属性

作用：控制路由跳转是浏览器的历史记录
push 默认值：追加历史记录
replace 替换当前记录

编程式路由

import router from "@/router";
// router.replace({
router.push({
    // path:''
    name: 'xq',
    params: {
      id: id,
      title: title
    }
  })