在工程化项目中配置vue-router

1、安装

npm i vue-router@4     

router4的使用方法

注意3和4 的使用步骤是不一样的 

vue3报错“ Uncaught TypeError: Cannot read property ‘use‘ of undefined”_御前吹水的博客-CSDN博客

2、创建组件

views/Home.vue

3、引入vue-router，并初始化路由对象

router/index.js

import {createRouter, createWebHistory} from 'vue-router'

import Home from '../views/Home'

import Detail from '../views/Detail.vue'

import TestVuex from '../views/TestVuex'

 
const routerHistory = createWebHistory()
 
const router = createRouter({
    history: routerHistory,

routes:[

        {

            path:'/',

            component:Home

        },

        {

            path:'/detail/:id',

            component:Detail

        },

        {

            path:'/test/vuex',

            component:TestVuex

        }

    ]
}

export default router

4、注入路由

main.js 中->

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

5、 呈现组件

App.vue：

<template>

  <div id="app">

    <router-view></router-view>

  </div>

</template>

6、 切换路由