vue练习

<template>
  <div>
    <post-list :posts="posts" v-show="flag"></post-list>
    <button @click="deleteData">删除一条数据</button>
    <button @click="isShow">销毁列表组件</button>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import PostList from "../views/PostList.vue";
import axios from "axios"

// 父组件通过子组件属性传值，绑定的属性可以看作是通信信号
const posts = ref([]);

const flag = ref(true)
const isShow = () => {
  flag.value = !flag.value
}

const deleteData = () => {
  posts.value.pop()
}

const data = axios.get("http://localhost:8888/posts")
.then((response) => {
  console.log("响应的数据",response)
  posts.value = response.data
})
.catch((error) => {
  console.log("请求异常",error)
})
.finally(() => {
  console.log("最后比执行")
})
</script>

<style scoped></style>

<template>
  <div>
    <p>博客列表</p>
    <div v-for="(post,index) in posts" :key="index">
    <single-post :post="post"></single-post>
    </div>
    
  </div>
</template>

<script setup lang="ts">
import SinglePost from "../views/SinglePost.vue"
import {ref,onMounted,onUnmounted,onUpdated} from "vue"
// 子组件定义属性，用于接收传值
defineProps({
  posts: Array,
});

// vue常用的生命钩子函数，onMounted,onUnmounted,onUpdated
// 在页面渲染之前执行
onMounted(() => {
  alert("当页面渲染前执行")
})

// 在页面不渲染前，也就是页面销毁前执行
onUnmounted(() => {
  alert("当页面销毁前执行")

})

// 在页面内容发生变化时执行
onUpdated(() => {
  alert("当页面内容发生变化时执行")
})
</script>

<style scoped></style>

<template>
  <div>
    <h3>{{ props.post.title }}</h3>
    <p>{{ data }}</p>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
// 在js的逻辑代码中，不能直接使用defineProps中定义的属性名，可以通过一个对象接受使用
const props = defineProps({
  post: Object,
});

const data = computed(() => {
  return props.post.body.substring(0,100) + "...";
});

</script>

<style scoped></style>

请求抽离：

import { ref } from "vue";
import axios from "axios";

const getPost = (id:number) => {
  // 父组件通过子组件属性传值，绑定的属性可以看作是通信信号
const post = ref({});

  // 在定义方法时，只需在方法前加async关键字就可以将该方法设置为异步方法
  // 通过const当以的名字必须唯一，且该名字不能指向另一个对象，但可以改变名字指向对象的值
  const loadData = async () => {
    let data = await axios.get("http://localhost:8888/posts/" + id);
    console.log("获取的数据:", data);
    post.value = data.data;
  };

  loadData();
  return { post, loadData };
};

export default getPost;

路由传参：

import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
import Home from "../views/Home.vue";
import About from "../components/About.vue";

const routes: Array<RouteRecordRaw> = [
  { path: "/", name: "index", component: Home },
  // 通过在路由中设置props: true，可以使得在跳转的目标路由中通过defineProps函数接收参数
  { path:"/about/:id", name: "about", component: About,props: true}
];

const router = createRouter({
  history: createWebHistory(),
  routes: routes,
});

export default router;

  <router-link :to="{name:'about',params:{id:props.post.id}}">
    <h3>{{ props.post.title }}</h3>
  </router-link>

<template>
  <div>
    <h2>About关于 -- {{id}}</h2>
    <h3>{{ post.title }}</h3>
    <p>{{ post.body }}</p>
    <div v-for="(item, index) in post.tags" :key="index">{{ item }}</div>
  </div>
</template>

<script setup lang="ts">
import getPost from "../api/about"
const props = defineProps({
  id: Number,
});

const {post} = getPost(props.id);
</script>
<style scoped></style>

也可以通过useRoute函数的对象来获取当前路由的参数

import {useRoute} from "vue-router"
const route = useRoute()
route.params.id

如果使用这种方式，就可以不用在路由上加 props:true来开启属性传值

总结：

在逻辑ts中实现路由跳转

import { useRouter } from "vue-router";
const router = useRouter();
router.push("/")
// 或者
router.push({ path: "/", name: "index", component: Home })

拿到当前组件的路由实例，同时获取其中的信息

import {useRoute} from "vue-router"
const route = useRoute()
route.params.id

 在template模板中实现路由跳转使用 router-link  并通过属性 to 指定跳转的目标路由

// 这种可以传参数
<router-link :to="{name:'about',params:{id:props.post.id}}">
   <h3>{{ props.post.title }}</h3>
</router-link>
{ path: "/about/:id", name: "about", component: About},
// 或者
<router-link to="/">首页</router-link>
<router-link to="/create">新建</router-link>