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.youkuaiyun.com/download/xgw1010/90897656