当前位置：首页 > article >正文

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

article 2025/1/27 6:19:49

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不能写path
          params:{
            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
   }
 })