Vue 路由器负载问题

Question

我已经为我的项目安装了 vue router，但问题是，当单击按钮时，我看到 url 参数发生了变化，但页面没有更新。或者当我直接访问 url 时，未加载预期页面

src文件夹内有3个文件夹和main.js和App.vue

资产 成分 路由器（如果有index.js的话） 视图（里面有PrivacyPolicy.vue和TermsAndConditions.vue）

** 索引.js**

import { createRouter, createWebHistory } from 'vue-router'
const routes = [
  {
    path: '/policy',
    name: 'PrivacyPolicy',
    component: () => import('../views/PrivacyPolicy.vue')
  },
  {
    path: '/terms',
    name: 'TermsAndConditions',
    component: () => import('../views/TermsAndConditions.vue')
  }
]
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})
export default router

main.js

import { createApp } from 'vue'
import App from './App.vue'
import Vue3Lottie from 'vue3-lottie'
import '@mdi/font/css/materialdesignicons.css' 
import { aliases, mdi } from 'vuetify/iconsets/mdi'

import router from '@/router/index.js'; // Import the router configuration


// Vuetify
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

const vuetify = createVuetify({
  icons: {
    defaultSet: 'mdi',
    aliases,
    sets: {
      mdi,
    },
  },
  components,
  directives,
})



const app = createApp(App)
app.use(Vue3Lottie)
app.use(vuetify) 
app.use(router)
app.mount('#app')

** 应用程序.vue**

<template>
  <div>
  <AppHeader />
  <AppBanner />
  <AppMain />
  <AppFooter />
  </div>
</template>

<script>
import AppHeader from "./components/AppHeader.vue";
import AppBanner from "./components/AppBanner.vue";
import AppMain from "./components/AppMain.vue";
import AppFooter from "./components/AppFooter.vue";


export default {
  name: 'App',
  components: {
    AppHeader,
    AppBanner,
    AppMain,
    AppFooter,
},
}
</script>

** 隐私策略.vue**

<template>

Some text

</template>

<script>
export default {};
</script>

** 条款和条件.vue**

<template>

Some text

</template>

<script>
export default {};
</script>

Answer 1

您的代码缺少

<router-view />

元素。

<router-view />

元素用于注入当前页面。

<router-link>

元素用于在页面之间重定向。要定义路径，请使用

to

属性。

<template>
  <router-link to="/about"> Redirect to About on click </router-link>
</template>

以编程方式重定向导入

useRouter

:

<script setup>
import { useRouter } from "vue-router";

function redirectToAbout() {
  useRouter().push("/about");
}
</script>