vue3路由+meta

原创已于 2023-03-08 21:09:27 修改 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2023-03-08 20:10:14 首次发布

vue 专栏收录该内容

37 篇文章

订阅专栏

本文介绍了Vue3中与路由交互的meta属性，包括onBeforeRouteLeave和onBeforeRouteUpdate钩子的使用。重点讨论了如何基于路由配置数组动态生成导航，强调了在处理路由数组时深拷贝的重要性，提供了一个基础版的实现步骤，帮助理解动态导航生成的目的和方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

meta 路由元元素

meta中key-value都是自定义的

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

export let constom = [
    {
        path:'/',
        name:"Home",
        component:()=>import('@/page/Home/index.vue'),
        // meta 路由元元素
        // meta中key-value都是自定义的
        meta:{
            title: "首页"
        }
    }, {
        path:'/shopcar',
        name:"ShopCar",
        component:()=>import('@/page/ShopCar/index.vue'),
        meta:{
            title:'购物车'
        }
    }, {
        path:'/mine',
        name:"Mine",
        component:()=>import('@/page/Mine/index.vue'),
        meta:{
            title:'个人中心'
        }
    }
]
let router = createRouter({
    history:createWebHistory(),
    routes:constom,
    linkActiveClass: 'router-active', // 自定义被激活路由的class类名 默认名router-link-active
    linkExactActiveClass:'router-exact-active',// 自定义精准激活router-link的class类名 默认 router-link-exact-active
})

export default router

onBeforeRouteLeave

离开路由组件时候触发。基本不适用

onBeforeRouteUpdate

/**

* 1：渲染的组件不变

* 2：路由地址发生改变

* 用于：监听路由地址的变化（特别适合params参数时候）

* 还可以使用 watch 监听 $route 方式。代替onBeforeRouteUpdate

<template>
    <h1>shop car {{ $route.params.id }}{{ $route.params.title }}</h1>
    <div class="list">
        <ul>
            <li v-for="item in list.shopcar" :key="item.id" @click="e=>change(item)">
              <h2>名称：{{ item.title }}</h2>
              <h2>价格: {{ item.price }}</h2>
            </li>
        </ul>
    </div>
</template>
<script setup>
import { reactive} from 'vue';
import { useRoute,useRouter,onBeforeRouteLeave,onBeforeRouteUpdate } from 'vue-router'
import { getCarList } from '@/api.js'
let $route = useRoute();
let $router = useRouter();
console.log($route.params);
let list = reactive({
    shopcar:[]
})

getCarList().then((data) => {
    console.log(data);
    list.shopcar = data.data;
})

const change = ({id,title})=>{
    // 编程式导航。
    $router.push({
        name:'ShopCar',
        params:{
            id,
            title
        }
    })
}

// 离开路由组件时候触发。基本不适用
onBeforeRouteLeave((to,from,next)=>{
    console.log('组件内部守卫');
    next()
})
/**
 * 1：渲染的组件不变
 * 2：路由地址发生改变
 * 用于：监听路由地址的变化 （特别适合params参数时候）
 * 
 * 还可以使用 watch 监听 $route 方式。代替onBeforeRouteUpdate
 */
onBeforeRouteUpdate((to,from,next)=>{
    console.log('before update');
    next()
})

</script>
<style scoped>
li{
    margin: 20px;
    background-color: aqua;
}
</style>