需要安装vue-router
npm install vue-router
安装完成后在package.json中就会有vue-router
在src下新建一个文件夹router,新建一个index.js,如下:
import {createRouter,createWebHistory} from "vue-router";
import Home from "../views/Home.vue";
const routes=[
{path:"/",name:"Home",component:Home},
];
const router=createRouter({
history:createWebHistory(),
routes
})
export default router;
有多个路由的话就在routes中添加多个就可以了。
如果想要其他组件可以使用路由,那么就要在main.js中挂载使用,如下
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router';
//默认
//createApp(App).mount('#app')
//挂载路由
createApp(App).use(router).mount('#app')
然后我们就可以在app.vue中使用这个路由,如下
<script setup>
</script>
<template>
<router-view></router-view>
</template>
<style scoped>
</style>
<router-view></router-view>这个会去查找path为/的路由,看index.js中配置的这个路径就是Home组件。
接下来创建一个导航组件Navbar.vue
<script setup>
</script>
<template>
<header>
<h1>个人博客</h1>
<nav>
<!--<router-link :to="{name:'Home'}">首页</router-link>-->
<!--下边这种方式也可以-->
<router-link to="/">首页</router-link>
<router-link to="/create">新建</router-link>
</nav>
</header>
</template>
<style scoped>
</style>
那么如何在首页引用这个导航组件呢,需要在App.vue中import这个导航组件,然后在template中加上这个组件即可,如下:
<script setup>
import Navbar from './components/Navbar.vue'
</script>
<template>
<Navbar></Navbar>
<router-view></router-view>
</template>
<style scoped>
</style>