Vue3创建路由

一.安装依赖1.npm install vue-router@next

二.src目录下创建router/index.js文件，并创建views文件夹，再创建一个Home.vue和User.vue文件测试

router/index.js

import { createWebHistory, createRouter } from "vue-router";
import Home from '../views/Home.vue';
import User from '../views/User.vue';
const history = createWebHistory();
const router = createRouter({
    history,
    routes: [{
            path: '/',
            component: Home
        },
        {
            path: '/user',
            component: User
        }
    ]
})

export default router;

Home.vue

<template>
  <div>首页</div>
</template>

<script>
export default {
}</script>

<style >
</style>

User.vue

<template>
  <div>user</div>
</template>

<script>
export default {
}</script>

<style >
</style>

三.main.js导入router

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

四.App.vue添加< router-view></ router-view >

<template>
  <div id="app">
    <h1>在vue3里面使用Router</h1>
    <router-link to="/">首页</router-link>|
    <router-link to="/user">用户</router-link>
    <router-view></router-view>
  </div>
</template>

<script>

export default {
}
</script>

<style>
</style>

五.访问地址测试跳转