vue3路由

vue3路由

1.下载vue3路由插件

npm install -save vue-router@4.*

2.在src下创建router文件夹，在router文件夹下创建index.js

index.js的内容如下 （路径需要根据自己的修改）

import { createRouter,createWebHashHistory } from "vue-router";


const routes = [
    {
        path:'/',
        component:() => import('../components/HelloTest.vue')
    },
    {
        path:'/LineChart',
        name:'LineChart',
        component:() => import('../components/LineChart.vue')
    },
    {
        path:'/BarChart',
        name:'BarChart',
        component:() => import('../components/BarChart.vue')
    },
    {
        path:'/BarChart2',
        name:'BarChart2',
        component:() => import('../components/BarChart2.vue')
    },
    {
        path:'/PieChart',
        name:'PieChart',
        component:() => import('../components/PieChart.vue')
    },
    {
        path:'/LineAndBar',
        name:'LineAndBar',
        component:() => import('../components/LineAndBar.vue')
    },
    {
        path:'/SecondChart',
        name:'SecondChart',
        component:() => import('../components/SecondChart.vue')
    }


]


export const router = createRouter({
    history:createWebHashHistory(),
    routes:routes
})


export default router

3.在main.js中导入router

main.js代码

import { createApp } from 'vue'
import App from './App2.vue'
import router from './router/index.js'

const app = createApp(App)

app.config.productionTip = false
app.use(router)
app.mount('#app')

注意：先app.use再app.mount不然可能报错

4.vue-router的使用

App2.vue的代码

<template>
  <h2>App2</h2>
    <router-link class="r" to="/">HelloTest</router-link>
    <router-link class="r" to="/LineChart">LineChart</router-link>
    <router-link class="r" to="/BarChart">BarChart</router-link>
    <router-link class="r" to="/BarChart2">BarChart2</router-link>
    <router-link class="r" to="/PieChart">PieChart</router-link>
    <router-link class="r" to="/LineAndBar">LineAndBar</router-link>
    <router-link class="r" to="/SecondChart">SecondChart</router-link>
    <hr>
    <router-view></router-view>
</template>


<script>
export default {
  name: "App",
  components: {},
};
</script>


<style>
.r{
    margin:25px;
    text-decoration: none;
    color: rgb(45, 54, 62);
}
</style>

20230404_085321