1. 安装 vue-router,默认安装的就是 4版本
yarn add vue-router
npm i vue-router
2. 在根路径上新建文件夹 router并在里面 新建 index.js 文件,编码:
import {createRouter,createWebHistory,} from 'vue-router'
const router = createRotuer({
// 路由模式:createWebHistory() 不带 #号; createWebHashHistory() 带 #号
histroy: createWebHistory(),
routes:[
{
path: '/home',
component: () => import('../pages/Home.vue')
},
{
path: '/login',
component: () => import('../pages/Login.vue')
}
]
})
export default router
3. 在 main.js 内挂载
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')
4. 在 App.js 中使用
<template>
<!-- 路由出口 -->
<router-view></router-view>
</template>
5. 页面使用 route 与 router
<script>
import { useRoute, useRouter } from 'vue-router'
export default {
setup() {
const route = useRoute()
console.log(route.path)
console.log(route.fullPath)
const router = useRouter()
const login = () => {
router.push('/home')
}
},
}
</script>