安装和使用vue-router

最新推荐文章于 2024-07-12 16:55:56 发布

三月姑娘

最新推荐文章于 2024-07-12 16:55:56 发布

阅读量94

点赞数

文章标签：前端 vue

本文链接：https://blog.csdn.net/weixin_46886988/article/details/140372965

版权

1.安装vue-router

npm install vue-router

2.新建页面 views => home => home.vue
在这里插入图片描述

<script setup lang="ts">

</script>

<template>
 <div>首页</div>
</template>

<style scoped>

</style>

2.配置路由 router => index.js
在这里插入图片描述

import { createRouter, createWebHistory } from "vue-router";

const routes = [
    {
        path:'/',
        name:'Home',
        component:()=> import('../views/home/home.vue')
    }
]

const router = createRouter({
    history:createWebHistory(),
    routes
})

export default router

4.在main.ts 引入 router
在这里插入图片描述

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index';
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(ElementPlus)
app.use(router)
app.mount('#app')

挂载

<template>
  <!-- router-view :   路由的整个出口, 用来显示和 URL 对应的组件; -->
  <router-view v-slot="{ Component }">
      <!-- keep-alive 是Vue提供的一个抽象组件，主要用于保留组件状态或避免重新渲染。 -->
      <keep-alive>
          <component :is="Component" />
      </keep-alive>
  </router-view>
</template>
 
<script>
  export default {
    
  }
</script>
 
<style lang="scss" scoped>
 
</style>