随笔 - 403  文章 - 0  评论 - 6  阅读 - 3254

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   石铁生  阅读(19)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 终于写完轮子一部分:tcp代理 了,记录一下
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

点击右上角即可分享
微信分享提示