vue3router

4. 路由

4.1. 【对路由的理解】

image-20231018144351536

4.2. 【基本切换效果】

  • Vue3中要使用vue-router的最新版本,目前是4版本。

  • 路由配置文件代码如下:

    import {createRouter,createWebHistory} from 'vue-router'
    import Home from '@/pages/Home.vue'
    import News from '@/pages/News.vue'
    import About from '@/pages/About.vue'

    const router = createRouter({
    history:createWebHistory(),
    routes:[
    {
    path:'/home',
    component:Home
    },
    {
    path:'/about',
    component:About
    }
    ]
    })
    export default router
  • main.ts代码如下:

    import router from './router/index'
    app.use(router)

    app.mount('#app')
  • App.vue代码如下

    <template>
     <div class="app">
       <h2 class="title">Vue路由测试</h2>
       <!-- 导航区 -->
       <div class="navigate">
         <RouterLink to="/home" active-class="active">首页</RouterLink>
         <RouterLink to="/news" active-class="active">新闻</RouterLink>
         <RouterLink to="/about" active-class="active">关于</RouterLink>
       </div>
       <!-- 展示区 -->
       <div class="main-content">
         <RouterView></RouterView>
       </div>
     </div>
    </template>

    <script lang="ts" setup name="App">
     import {RouterLink,RouterView} from 'vue-router'  
    </script>

 

posted on 2024-02-27 13:10  石铁生  阅读(21)  评论(0编辑  收藏  举报