Vue3笔记——（三）hooks、路由

015 hooks
作用：使得代码更加模块化和可维护

Person.vue
<template><div><h2>当前求和{{ sum }}</h2><button @click="addFn">点我sum+1</button></div>
</template>
<script setup lang="ts" name="person">
import useSum from '@/hooks/useSum'
const { sum} = useSum()

useSum.ts
import { ref, reactive, onMounted } from "vue";
export default function () {// 数据let sum = ref(0);// 方法function addFn() {sum.value++;}//钩子onMounted(() => {console.log("useSum钩子函数");});return { sum, addFn };
}

015 命名路由

操作步骤：
1.绘制导航区、展示区
2.请来路由器
3.制定路由的具体规则(什么路由，对应什么组件)

注意点：
1.一般组件：亲手写标签 放在compunets
路由组件：考路由的规则渲染出来的 放在pages/views
2.通过点击导航，视觉效果上“消失”了的路由组件，默认是被卸载掉的，需要的时候再去挂载

history模式
mode:‘history’【vue2写法】
history:createWebHistory()【vue3写法】
优点：URL更加美观不带“#”,更接近传统的网站URL
缺点：后期项目上线，需要服务端配合处理路径问题，否则刷新会有404错误
location /{
try_files $uri $uri/ /index.html;
}
hash模式
优点：兼容性更好，因为不需要服务器端处理路径
缺点：URL带“#”不美观，且在SEO优化方面相对较差
to的三种写法
1.字符串写法
2.对象写法
to=“/home” 字符串写法
:to = “{path:‘/about’}”
:to = “{name:‘guanyu’}”

npm i vue-router

1.App.vue

<template><div class="app"><!-- 导航区 --><div class="navigate"><RouterLink to="/" active-class="xiaozhupeiqi">首页</RouterLink><RouterLink :to="{name:'xinwen'}" active-class="xiaozhupeiqi">新闻</RouterLink><RouterLink :to="{path:'/about'}" active-class="xiaozhupeiqi">关于</RouterLink></div><!-- 展示区 --><div class="main-content"><RouterView></RouterView></div></div>
</template>

import { RouterView, RouterLink } from 'vue-router'

2.创建路由器并暴露：src/router/index.ts

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
const router = createRouter({history: createWebHistory(),//路由工作模式routes: [{//引入一个一个可能要呈现的组件path: '/',name: 'home',component: HomeView},{	path: '/about',name: 'about',component: () => import('../views/AboutView.vue'),},],
})
export default router

3.main.js

// 引入用于创建应用
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
const app = createApp(App);
app.use(router);
app.mount("#app");

016 嵌套路由

children:[{ name: “xxxx”, path: “xxxxx”, component: xxxxxxxx }]

const router = createRouter({history: createWebHistory(), //路由器的工作模式（稍后讲解）// history: createWebHashHistory(), //路由器的工作模式（稍后讲解）routes: [//一个一个的路由规则{ name: "zhuye", path: "/", component: Home },{ name: "guanyu", path: "/about", component: About },{name: "xinwen",path: "/news",component: News,children: [{ name: "xiangqing", path: "detail", component: Detail }],},],
});

 <RouterLink :to="{path: '/news/detail'>{{ item.title }}</RouterLink>

016 嵌套参数
1.路由query参数
触发的地方：to="/news/detail?a=哈哈&b=你好"
接收的地方：

import {useRoute} from 'vue-router'
const route = useRoute();
route.query.a

    <!-- 导航区 --><ul><li v-for="item in newList" :key="item.id"><!-- 第一种写法 --><RouterLink :to="`/news/detail?id=${item.id}&title=${item.title}&content=${item.content}`">{{ item.title }}</RouterLink><!-- 第二种写法 --><RouterLink :to="{// path: '/news/detail', path或者name都可以name:'xiangqing',query: {id: item.id,title: item.title,content: item.content}}">{{ item.title }}</RouterLink></li></ul><!-- 展示区 --><div class="news-content"><RouterView></RouterView></div>

2.路由params参数

1.传递params参数时，若使用to的对象写法，必须使用name配置项，不能用path
2.传递params参数时，需要提前在规则中占位

    <!-- 导航区 --><ul><li v-for="item in newList" :key="item.id"><!-- 第一种写法 --><!-- <RouterLink :to="`/news/detail/${item.id}/${item.title}/${item.content}`">{{ item.title }}</RouterLink> --><!-- 第二种写法 --><RouterLink :to="{name:'xiangqing',//只能写name不能写pathparams:{id:item.id,title:item.title,content:item.content}}">{{ item.title }}</RouterLink></li></ul><!-- 展示区 --><div class="news-content"><RouterView></RouterView></div>

const router = createRouter({history: createWebHistory(), //路由器的工作模式（稍后讲解）// history: createWebHashHistory(), //路由器的工作模式（稍后讲解）routes: [//一个一个的路由规则{ name: "zhuye", path: "/", component: Home },{name: "xinwen",path: "/news",component: News,children: [{name: "xiangqing",path: "detail/:id/:title/:content?",//第一种写法,?可传可不传component: Detail,},],},{ name: "guanyu", path: "/about", component: About },],
});

Detail.vue

  <ul class="news-list"><li>编号：{{ route.params.id }}</li><li>标题：{{ route.params.title }}</li><li>内容：{{ route.params.content }}</li></ul>

016 路由规则的props配置

children: [{name: "xiangqing",path: "detail/:id/:title/:content?",component: Detail,// 第一种写法【props:true的作用相当于<Detail id="" title="" content=""/> 【只能params接收】】/* props: true, */// 第二种函数写法props(route) {console.log(">>>>>", route);return route.params;}, //params此处写法没有必要，props:true即可// 第三种对象写法：可以自己决定将什么作为props给路由组件/* props: {a: 100,b: 200,c: 500,}, */},],

016 路由replace属性

    <!-- 导航区 --><div class="navigate"><RouterLink to="/" active-class="xiaozhupeiqi">首页</RouterLink><RouterLink :to="{ name: 'xinwen' }" active-class="xiaozhupeiqi">新闻</RouterLink><RouterLink replace :to="{ path: '/about' }" active-class="xiaozhupeiqi">关于</RouterLink></div>

016 路由编程式路由导航
push与to的写法一致

import { useRouter } from 'vue-router'
const router = useRouter();
router.push("/news")
router.replace({name: 'xiangqing',params: {id: item.id,title: item.title,content: item.content}})

017 路由重定向
router/index.ts

{ path: "/", redirect: "/home" },