Vue3 路由的基本使用(router)

路由：简单的来说就是在浏览器输入Url地址回车之后，会显示该Url页面的内容,效果如下

App.vue组件代码(程序入口的组件)

<template>
  <div class="navigate">
    <RouterLink to="/Home" active-class="active">首页</RouterLink>
    <RouterLink to="/about" active-class="active">关于</RouterLink>
  </div>
  <br/>
  //路由页面显示的地方RouterView
  <RouterView/>
</template>

<script setup  name="App" >
</script>

<style scoped>
.navigate{
  float: left;
}
.navigate a{
  background-color: azure;
  margin: 10px;
}
.navigate a.active{
  background-color: red;
  margin: 10px;
}
</style>

HomePage.vue组件代码

<template>
    <div class="HomePage">
        <p>这是HomePage内容</p>
    </div>
</template>
 
<script setup name="HomePage">

</script>
 
<style scoped>
</style>

AboutPage.vue组件代码

<template>
    <div class="AboutPage">
        <p>这是AboutPage内容</p>
    </div>
</template>
 
<script setup name="AboutPage">

</script>
 
<style scoped>
</style>

1、安装router  npm i vue-router

2、路由/router/index.ts代码

//引入createRouter
import { createRouter,createWebHistory } from "vue-router";
//引入组件
import HomePage from '@/components/HomePage.vue'
import AboutPage from '@/components/AboutPage.vue'

//创建路由器
const router=createRouter({
    history:createWebHistory(),
    routes:[{
        path:'/Home',
        component:HomePage
    },
    {
        path:'/About',
        component:AboutPage
    }
]
})
//创建一个路由器，并暴露出去
export default router;

 3、main.js引入路由并使用

import { createApp } from 'vue'
import App from './App.vue'
//引入路由器
import router from './router/index.ts'

const app= createApp(App)
//使用路由器
app.use(router)
app.mount('#app')

本文来自  www.luofenming.com