2、Vue 3 - Vue Router 使用实录 : 路由配置与页面跳转

本篇文章做两个演示：一是 router-view，二是 router-link。

1、创建组件

src/views/AboutView.vue

<template>
    <div class="container bg-primary">关于</div>
</template>

src/views/HomeView.vue

<template>
    <div class="container bg-primary">首页</div>
</template>

2、定义路由

src/router/index.ts

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

const router = createRouter({
    history: createWebHistory(),
    routes:[
        {
            path:'/',
            name:'home',
            component: () => import('@/views/HomeView.vue'),
            meta:{
                'title':'首页'
            }
        },
        {
            path:'/about',
            name:'about',
            component: () => import('@/views/AboutView.vue'),
            meta:{
                'title':'关于'
            }
        }
    ]
})

export default router

解释代码含义：

• createRouter({}) 用于创建路由实例并配置相关参数
• history表示路由路由浏览器历史前进后退规则
• routes属性数组，用于配置路由规则
  • path URL
  • name 路由名称
  • compoent 定该路由对应的页面组件，使用动态导入（异步加载）方式
  • meta 元信息对象：可以存放与路由相关的附加信息，如页面标题、权限控制等

3、注册路由

src/main.ts

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

import 'bootstrap/scss/bootstrap.scss'

import router from './router'

const app = createApp(App)
// 使用路由
app.use(router)

app.mount('#app')

两种方式使用路由

方式一：router-view

<router-view>：用于渲染与当前路由匹配的组件。

src/App.vue

<template>
  <div class="container text-center">
    <h3>Vue Router</h3>
  </div>
  <!-- 使用 router-view -->
  <RouterView></RouterView>
</template>

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

<style scoped></style>

使用 RouterView 进行渲染后，就可以通过浏览器访问了。兴高采烈的访问 http://localhost:5173/，果然看到输出了。但是只有首页，about 去哪了？

通过 http://localhost:5173/about 去访问，about 才出现，是不是很不方便。

方式二：router-link

<router-link>：用于在应用中创建导航链接。它会渲染为一个<a>标签，并在用户点击时触发路由导航。

src/App.vue

<template>
  <div class="container text-center">
    <h3>Vue Router</h3>
    <RouterLink to="/">首页</RouterLink>
    <RouterLink to="/about">关于</RouterLink>

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

</template>

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

<style scoped></style>