[Vue3]-router实现基本的页面跳转

Erick Yu

已于 2024-03-24 22:05:42 修改

阅读量851

点赞数 12

文章标签： typescript 前端

于 2024-03-24 20:44:14 首次发布

本文链接：https://blog.youkuaiyun.com/ykrsgs/article/details/136969903

版权

本文介绍了如何在Vue项目中使用vue-router，包括在App.vue中设置导航区和展示区，以及配置路由规则和引入组件。详细步骤涉及安装、创建路由器实例和在main.ts中挂载应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 在App.vue引入路由并写好导航区和展示区的内容

import {RouterView, RouterLink} from 'vue-router'

<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')