vue手写<RouterLink/>组件实现demo详解
作者：XiaoSong
这篇文章主要为大家介绍了vue手写<RouterLink/>组件实现demo详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
手写<RouterLink/>组件
如果使用a标签改变页面会重新发起请求，但是我们点击<RouterLink/>的时候不会。以下手把手实现一个简单的<RouterLink/>组件。这节内容与手写<RouterView/>组件（上一节内容）有一定的联系，建议先看一下。
1、加上一个响应式数据
在上一节的基础上加上一个响应式数据（把获取当前路径写在了这里）。
import About from '../view/About.vue'
import Home from '../view/Home.vue'
import {ref} from 'vue'
export default [
{
path: '/',
component: Home
},
{
path: '/about',
component: About
}
]
// 新加内容
export const path = ref(window.location.pathname)2、对<RouterView/>组件进行简单的改造
<template>
<div>
<component :is="view"></component>
</div>
</template>
<script setup>
import { computed } from 'vue'
import Router from '../Router';
// 引入path这个响应式数据
import { path } from '../Router';
const view = computed(() => {
// 这里直接使用的path
const res = Router.find(item => item.path == path.value)
return res.component
})
</script>
<style lang="scss" scoped>
</style>3、创建<RouterLink/>组件
内容如下：
@click.prevent阻止a标签的默认行为，让其被点击时执行push函数。push函数里执行的就是改变path为要加载的页面路径。
<template>
<div>
<a :href="to" rel="external nofollow" @click.prevent="push">
<slot></slot>
</a>
</div>
</template>
<script setup>
import { path } from '../Router';
const props = defineProps({
to: {type: String, required: true}
})
const push = () => {
path.value = props.to
}
</script>4、在App.vue中使用
当你点击时不会重新请求。
<RouterLink :to="'/'">首页</RouterLink> <RouterLink :to="'/about'">关于</RouterLink> <RouterView></RouterView>
以上就是vue手写RouterLink组件实现demo详解的详细内容，更多关于vue手写RouterLink组件的资料请关注脚本之家其它相关文章！