vue 导航 + router-view 局部刷新
安装vue-router
在项目目录下运行：
npm install vue-router@4
代码
在 router-view 上添加 :key=“$route.fullPath” 属性，当 r o u t e 发生变化时，会重新渲染 r o u t e r − v i e w 组件，从而实现刷新效果。每次路由发生变化， route 发生变化时，会重新渲染 router-view 组件，从而实现刷新效果。 每次路由发生变化， 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