1. 在App.vue引入路由并写好导航区和展示区的内容
import {RouterView, RouterLink} from 'vue-router'
<RouterView></RouterView>
<template>
<div class="app">
<!-- 导航区 -->
<div class="navigate">
<RouterLink to="/home">Home</RouterLink>
<RouterLink to="/news">News</RouterLink>
<RouterLink to="/about">About</RouterLink>
</div>
<!-- 展示区 -->
<div class="main-content">
<RouterView></RouterView>
</div>
</div>
</template>
<script lang="ts" setup name="App">
import {RouterView, RouterLink} from 'vue-router'
import Header from './components/Header.vue'
</script>
<style scoped>
/* 可以添加一些样式 */
</style>
2. 配置路由器
安装
npm i vue-router
创建路由器
新建文件夹:
src/router
新建文件:
router/index.ts
import { createRouter, createWebHistory } from "vue-router";
import Home from '@/components/Home.vue'
import News from '@/components/News.vue'
import About from '@/components/About.vue';
const router = createRouter ({
history:createWebHistory(), // 路由器的工作模式
routes:[ // 一个一个的路由规则
{
path:'/home',
component:Home
},
{
path:'/news',
component:News
},
{
path:'/about',
component:About
}
]
})
export default router
main.ts中引入路由
import './assets/main.css'
import { createApp } from 'vue'
import App from './App.vue'
// 引入路由器
import router from './router'
// 创建一个应用
const app = createApp(App)
// 使用路由器
app.use(router)
// 挂载整个应用到app容器
app.mount('#app')