vue 导航 + router-view 局部刷新

安装vue-router

在项目目录下运行：

npm install vue-router@4

代码

在 router-view 上添加 :key=“$route.fullPath” 属性，当 $route发生变化时，会重新渲染router-view组件，从而实现刷新效果。每次路由发生变化，$route.fullPath 的值会改变，这会导致 Vue 认为 router-view 是一个新的组件，从而重新创建它。

<template><router-view :key="$route.fullPath"></router-view>
</template><script>
export default {name: 'App',watch: {'$route' (to, from) {// 可以添加一些逻辑，比如根据路由变化更新数据}}
};
</script>

如果当前只有一个router-view 组件，可以不需要key属性。

创建路由器实例

import { createMemoryHistory, createRouter } from 'vue-router'import HomeView from './HomeView.vue'
import AboutView from './AboutView.vue'const routes = [{ path: '/', component: HomeView },{ path: '/about', component: AboutView },
]const router = createRouter({history: createMemoryHistory(),routes,
})

这里的 routes 选项定义了一组路由，把 URL 路径映射到组件。其中，由 component 参数指定的组件就是先前在 App.vue 中被 渲染的组件。这些路由组件通常被称为视图，但本质上它们只是普通的 Vue 组件。

注册路由器插件

createApp(App).use(router).mount('#app')

和大多数的 Vue 插件一样，use() 需要在 mount() 之前调用。

它的职责包括：

全局注册 RouterView 和 RouterLink 组件。
添加全局 $router 和 $route 属性。
启用 useRouter() 和 useRoute() 组合式函数。
触发路由器解析初始路由。

跳转

编程式跳转

export default {methods: {goToAbout() {this.$router.push('/about')},},
}

<RouterLink to="/">Go to Home</RouterLink>

效果

源码下载

https://download.csdn.net/download/xgw1010/90897656