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

作者: 温新

图书: 【Vue 3 Vue Router 使用实录】

阅读: 341

时间: 2024-11-23 02:22:23

本篇文章做两个演示:一是 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>
请登录后再评论