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>
请登录后再评论