入门

入门 | Vue Router (vuejs.org) (opens new window)

安装

npm init vue@latest
//或者
npm init vite@latest

1
2
3

使用Vue3 安装对应的router4版本；使用Vue2安装对应的router3版本

npm install vue-router@4

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

//引入路由对象
import { createRouter, createWebHistory, createWebHashHistory, createMemoryHistory, RouteRecordRaw } from 'vue-router'
 
//vue2 mode history vue3 createWebHistory
//vue2 mode  hash  vue3  createWebHashHistory
//vue2 mode abstact vue3  createMemoryHistory
 
// 路由数组的类型 RouteRecordRaw
// 定义一些路由
// 每个路由都需要映射到一个组件。
const routes: Array<RouteRecordRaw> = [{
    path: '/',
    component: () => import('../components/a.vue')
},{
    path: '/register',
    component: () => import('../components/b.vue')
}]
 
const router = createRouter({
    history: createWebHistory(),
    routes
})
 
// 导出router
export default router

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

在App.vue

<template>
  <div>
    <div>
    <!--使用 router-link 组件进行导航 -->
    <!--通过传递 `to` 来指定链接 -->
    <!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->
      <router-link tag="div" to="/">跳转a</router-link>
      <router-link tag="div" style="margin-left:200px" to="/reg">跳转b</router-link>
    </div>
    <hr />
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
  </div>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

在main.ts挂载

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')

1
2
3
4

上次更新: 2024/08/14, 04:14:33

← RouterOptions 路由模式→