尚医通(vue3+ts) 跟练--------项目路由的搭建与滚动行为(超详细版)

底部组件拆分与静态搭建

详见HospitalTop/index.vue和HospitalBottom/index.vue

1.1  路由搭建

1.1.1 步骤

新建src/pages

pages下新建Home/index.vue和Hospital/index.vue

Home/index.vue

<template>
  <div>
    <!-- 首页轮播图 -->
    <Carousel/>
    <!-- 首页搜索医院搜索框 -->
    <Search/>
  </div>
  
</template>
<script setup lang="ts">
//引入首页轮播图组件
import Carousel from './Carousel/index.vue'
import Search from './Search/index.vue'
</script>
<style scoped>
</style>

Hospital/index.vue

<template>
  <div>我是医院详情</div>
</template>
<script setup lang="ts">
</script>
<style scoped>
</style

新建src/router/index.ts

下载vue-router

npm i vue-router

import { createRouter,createWebHashHistory } from 'vue-router'
//createRouter方法用于创建路由器实例，可以管理多个路由
export default createRouter({
    //路由的模式设置
    history:createWebHashHistory(),
    //管理路由
    routes:[
        {
            path:'/',
            redirect:'/home'
        },
        {
            path:'/home',
            component:()=>import('@/pages/Home/index.vue')
        },
        {
            path:'/hospital',
            component:()=>import('@/pages/Hospital/index.vue')
        },
    ],
    //滚动行为：控制滚动条的位置
      scrollBehavior() {
        return {
          left: 0,
          top: 0,
        };
      },
})

在main.ts引入vue-router核心插件并安装

//引入vue-router核心插件并安装
import router from '@/router'

//安装vue-router
app.use(router)

在App.vue 里加上router-view

<!-- 展示路由组件区域 -->
    <div class="content">
        <!-- 展示路由组件的区域 -->
        <router-view></router-view>
    </div>

路由搭建完成🦌