Vue Router
是 Vue
官方推荐路由组件。
Vue Router
官方文档:https://router.vuejs.org/zh/introduction.html
本文将根据 Vue Router入门 中的示例进行改造,实现与 vue 与 vue-router 的整合。
安装
yarn add vue-router
安装成功,可以在 package.json
文件中找到
整合
所有跟路由相关的配置都将放置于
src/router
目录下,方便管理
配置
在 src
目录下创建 router
目录
- index.ts:路由引入文件
- routes.ts:路由配置文件
index.ts
内容如下,其中对 routes
进行了引入
import { createRouter, createWebHistory } from 'vue-router'
import { routes } from './routes'
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
routes.ts
内容如下
暂时配置为空数组,后面编写示例时,再进行添加
export const routes = []
挂载
在 main.ts
文件中,将 vue-router
引入 vue 项目
import Vue, { createApp } from 'vue'
import App from '@/App.vue'
import router from '@/router'
const app = createApp(App)
app.use(router)
app.mount('#app')
使用
修改 App.vue
,内容如下
<template>
<router-view />
</template>
示例
接下来通过一个示例,演示在 vue-router 模式下如何开发页面及页面间的如何进行跳转
一、配置路由
在 routes.ts
文件中配置路由,这里定义了两个路由,分别指向 views
目录下的 Home.vue
及 About.vue
export const routes = [{
path: '/',
name: 'Home',
component: () => import(/* webpackChunkName: "Home" */'@/views/Home.vue')
}, {
path: '/about',
name: 'About',
component: () => import(/* webpackChunkName: "Home" */'@/views/About.vue')
}]
二、创建页面
在 views
目录下创建 Home.vue
、About.vue
及 Index.vue
,Index.vue
作为一个组件被其它两个页面引用,内容如下:
- Home.vue
<template>
<Index />
<h1>Home</h1>
</template>
<script lang="ts" setup>
import Index from './Index.vue'
</script>
- About.vue
<template>
<Index />
<h1>About</h1>
</template>
<script lang="ts" setup>
import Index from './Index.vue'
</script>
- Index.vue
<template>
<ul>
<li><router-link to="/">Go to Home</router-link></li>
<li><router-link to="/about">Go to About</router-link></li>
</ul>
</template>