下载依赖
npm install vue-router@next --save
新建routes.ts
import {createRouter,createWebHashHistory} from 'vue-router'
const router = createRouter({
"history":createWebHashHistory(),
routes:[
{
path: '/',
name: 'aaa',
meta: {title: 'aaa'},
component: () => import('@/views/aaa.vue'),
},
{
path: '/bbb',
name: 'bbb',
meta: {title: 'bbb'},
component: () => import('@/views/bbb.vue'),
},
{
path: '/ccc',
name: 'ccc',
meta: {title: 'ccc'},
component: () => import('@/views/ccc.vue'),
}
]
})
export default router
在 main.ts 引入 routes
import { createApp } from 'vue'
import App from './App.vue'
import routes from "./routes"
const app = createApp(App)
app.use(routes)
app.mount('#app')
在app.vue中使用路由进行单页面切换
<template>
<h1>App</h1>
<div class="router">
<router-link to="/" >aaa</router-link> |
<router-link to="bbb" >bbb</router-link> |
<router-link to="ccc" >ccc</router-link>
</div>
<router-view />
</template>
<script>
export default {
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.router-link-exact-active{
color: red;
}
</style>