vue3引入router

在Vue3中引入router的步骤如下：

1.安装vue-router

npm install vue-router@4.0.0-beta.13

2.在main.js中引入Vue和vue-router，并使用use()方法安装vue-router

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

const app = createApp(App)
app.use(router)
app.mount('#app')

3.创建路由实例

在src目录下创建router目录，并在该目录下创建index.js文件，用于创建路由实例。具体代码如下：

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

其中，createWebHistory()方法用于创建一个路由模式为history的路由实例。routes数组存储路由信息，包括路径、名称和组件。在这个例子中，我们定义了两个路由，一个是首页路由，一个是关于页面路由。

4.创建路由入口文件

在src目录下创建App.vue文件，用于作为路由入口。具体代码如下：

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

其中，router-view标签用于显示当前路由对应的组件。

5.创建页面组件

在src/views目录下创建Home.vue和About.vue文件，用于作为路由对应的页面组件。具体代码如下：

Home.vue

<template>
  <div>
    <h1>Home</h1>
    <p>Welcome to the home page!</p>
  </div>
</template>

About.vue

<template>
  <div>
    <h1>About</h1>
    <p>Welcome to the about page!</p>
  </div>
</template>

6.运行应用

在命令行中运行以下命令启动应用：

npm run serve

打开浏览器，在地址栏输入http://localhost:8080/，即可看到应用的首页。在地址栏输入http://localhost:8080/about，即可跳转到关于页面。