安装Router

因为Vue是单页面应用，不会有那么多的html跳转。所以要使用路由来做页面跳转。

Vue路由允许我们通过不同的URL访问不同的内容。通过Vue可以实现多视图的单页面web应用。

npm install vue-router@4

然后在src目录下面创建router文件夹，并在router目录下创建index.ts文件：

创建完后在index.ts中添加：

import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'

// 路由列表
const routes: Array<RouteRecordRaw> = [
  {
    path: '/', // 路由地址
    name: 'login', // 路由名称
    component: () => import('@/views/login.vue') // 路由地址对应的组件
  },
  {
    path: '/register', // 路由地址
    name: 'register', // 路由名称
    component: () => import('@/views/register.vue') // 路由地址对应的组件
  }
]

// 创建路由示例对象
const router = createRouter({
  history: createWebHistory(),
  routes
})

// 向外暴露router实例对象
export default router

然后再在main.ts中注册路由实例对象：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

app.use(router)

app.mount('#app')

App.vue中添加<router-view />：

<template>
  <div>
    <router-view />
  </div>
</template>

<script setup lang='ts'>
</script>

<style lang='scss' scoped></style>

效果：

router-view

<router-view />：路由出口，渲染URL地址栏路由地址对应的组件，默认渲染路由地址 path: '/' 的组件。

router-link

<router-link />：类似于a标签的作用，用来跳转页面。

to属性，接收一个路由地址，跳转到指定的路由地址。

示例：

<template>
  <div>
    <router-link to="/">登录</router-link>
    <router-link to="/register">注册</router-link>
    <router-view />
  </div>
</template>

<script setup lang='ts'>
</script>

<style lang='scss' scoped></style>