vue3中使用vue-router

1.第一步安装，vue3.0默认没有vue-router 需要下载4.0版本

npm install vue-router@4.0.0-beta.13

2.在 src/ 文件夹中，我们将添加三个文件。

• router/index.js
• views/Home.vue
• views/first.vue

3.建立路由

router/index.js中设置

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import first from '../views/first.vue'
import HelloWorld from '../components/HelloWorld.vue'

const routerHistory = createWebHistory()
const router = createRouter({
    history: routerHistory,
    routes: [
        {
            path: '/',
            component: HelloWorld
        },
        {
            path: '/home',
            component: Home
        },
        {
            path: '/first',
            component: first
        }
    ]
})
export default router

4.main.js中进行配置

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

import router from './router'

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

5.不要忘记app.vue中进行配置

<template>
  <div id='root'>
    <router-view />
  </div>
</template>

6.HelloWorld界面中

<template>
 
  <div class="content">
    <div id='nav'>
      <router-link to='/home'> Home</router-link>
      <router-link to='/first'>first </router-link>
    </div>
  </div>

</template>