Vue路由

路由

image-20240829155453971.png

  • router/index.ts

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    import { creatRouter, createWebHistory } from 'vue-router'
    import 自定义名1 from '../pages/组件1.vue'
    import 自定义名2 from '../pages/组件2.vue'

    export default createRouter({
        history: createWebHistory(),
        routes:[
            {
                path:'/自定义路由名1'
                component:/自定义名1,
            },
            {
                path:'/自定义路由名2'
                component:/自定义名2,
            },
        ],
    })

  • App.vue

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <template>
        <div class="......">
            <!-- 导航区 -->
            <router-link active-class="active" class="..." to="/props">1. props</router-link>
            <router-link active-class="active" class="..." to="/event">2. 自定义事件</router-link>
            ......
        </div>
        <div class="......">
            <!-- 占位一个展示区 -->
            <router-view></router-view>
        </div>
    </template>

    <script setup lang="ts" name="App">
    </script>

    <style>
    </style>

  • main.ts

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    import { createApp } from 'vue'
    import App from './App.vue'
    import { createPinia } from 'pinia'
    import router from './router/index'

    // 创建应用
    const app = createApp(App)
    // 创建pinia
    const pinia = createPinia()

    // 安装插件
    app.use(pinia)
    // 安装路由器
    app.use(router)
    // 挂载应用
    app.mount('#app')//使用.mount()方法将应用挂载到id为'app'的元素上