Vue全栈开发旅游网项目(3)-Vue路由配置

 import { createRouter, createWebHistory } from 'vue-router'//导入配置路由的工具

    
 import HomeView from '../views/HomeView.vue'//导入组件
    
  
    
 const router = createRouter({//创建路由对象
    
   history: createWebHistory(import.meta.env.BASE_URL),//路由模式
    
   routes: [//配置路由地址
    
     {
    
       path: '/',//目标地址
    
       name: 'home',//路由名称
    
       component: HomeView//路由目标
    
     },
    
     {
    
       path: '/about/:id/:type',
    
       name: 'about',
    
       component: () => import('../views/AboutView.vue')
    
     }
    
   ]
    
 })
    
 export default router //暴露路由对象
    
    
    
    
    javascript
    
    
![](https://ad.itadn.com/c/weblog/blog-img/images/2025-07-14/XfWv8KVTHoFLSx2kEPUr0zmdysau.png)

 <template>

    
   <div class="about">
    
     <h1>早上好</h1>
    
   </div>
    
 </template>
    
  
    
 <style>
    
 @media (min-width: 1024px) {
    
   .about {
    
     min-height: 100vh;
    
     display: flex;
    
     align-items: center;
    
   }
    
 }
    
 </style>
    
    
    
    
    javascript
    
    
![](https://ad.itadn.com/c/weblog/blog-img/images/2025-07-14/bRwWmfGOi1qn0A4XEPF39rvxITMs.png)

 import './assets/main.css'

    
 import { createApp } from 'vue'
    
 import App from './App.vue'//导入路由工具
    
 import router from './router'
    
 //引入vant ui
    
 import Vant from 'vant'
    
 import 'vant/lib/index.css'
    
  
    
 const app = createApp(App)
    
  
    
 app.use(router)//挂载路由组件
    
 app.use(Vant)
    
 app.mount('#app')
    
    
    
    
    javascript
    
    
![](https://ad.itadn.com/c/weblog/blog-img/images/2025-07-14/NUILB4buY9rTxWsXm7jaRgfGSKl5.png)

 <script setup>

    
 import { RouterLink,RouterView,useRoute } from 'vue-router'
    
 const route = useRoute()//获得useRoute实例
    
 </script>
    
  
    
 <template>
    
   <RouterView />
    
 </template>
    
 <style scoped></style>
    
    
    
    
    javascript
    
    

 <template>

    
   <header>
    
     <div class="wrapper">
    
       <nav>
    
     <RouterLink to="/">主页</RouterLink> -->
    
     <RouterLink to="/about">
    
       关于我们
    
       {{ route.params.id }}
    
       {{ route.params.type }}
    
       {{ route.query.name }}
    
       {{ route.query.sort }}
    
     </RouterLink>
    
       </nav>
    
     </div>
    
   </header>
    
   <RouterView />
    
 </template>
    
    
    
    
    javascript
    
    
![](https://ad.itadn.com/c/weblog/blog-img/images/2025-07-14/ajE1Z3XkKPMDyGx08Aw2rto9TCF6.png)

 <script setup>

    
 import TripFooter from '@/components/common/Footer.vue';
    
 import SightItem from '@/components/common/ListSight.vue';
    
 import { ref,onMounted } from 'vue'
    
 //景点名称
    
 const sightName = ref('')
    
 //景点列表
    
 const dataList = ref([])
    
 //总记录
    
 const totalItem = ref(0)
    
 //当前页码
    
 const currentPage = ref(1)
    
 //每页数据的大小
    
 const perPage = ref(5)
    
 //搜索函数
    
 const onSearch = ()=>{
    
     console.log('onSearch')
    
 }
    
 </script>
    
    
    
    
    javascript
    
    
![](https://ad.itadn.com/c/weblog/blog-img/images/2025-07-14/Qa1UAwx5fjlYFVZziD72dSobREOu.png)

 <template>

    
     <div class="page-search">
    
     <!-- 标题 -->
    
     <van-nav-bar title="搜索景点"/>
    
     <!-- 搜索框 -->
    
     <van-search v-model="sightName" 
    
     show-action
    
     label="景点"
    
     placeholder="请搜索关键词"
    
     @search="onSearch">
    
     <template #action>
    
         <div @click="onSearch">搜索</div>
    
     </template>
    
     </van-search> 
    
     <!-- 景点列表 -->
    
     <div class="sight-list">
    
         <SightItem v-for="item in dataList"
    
         :key="item.id"
    
         :item="item"/>
    
     </div>
    
     <!-- 分页 -->
    
     <van-pagination v-model="currentPage"
    
     :total-items="totalItem"
    
     :items-per-page="perPage">
    
     </van-pagination>
    
     <!-- 底部导航 -->
    
     <TripFooter/>
    
     </div>
    
 </template>
    
    
    
    
    javascript
    
    
![](https://ad.itadn.com/c/weblog/blog-img/images/2025-07-14/qpZDvKgruXVR8Oye4zMJjtLflcid.png)

 import { createRouter, createWebHistory } from 'vue-router'

    
 import HomeView from '../views/HomeView.vue'
    
 import Search from '@/views/Search.vue'👈
    
  
    
 const router = createRouter({
    
   history: createWebHistory(import.meta.env.BASE_URL),
    
   routes: [
    
     {
    
       path: '/',
    
       name: 'home',
    
       component: HomeView
    
     },
    
     {👇
    
       path:'/search',
    
       name:'Search',
    
       component:Search
    
     }
    
   ]
    
 })
    
 export default router
    
    
    
    
    javascript
    
    
![](https://ad.itadn.com/c/weblog/blog-img/images/2025-07-14/U2vGXwEzlFLndu18Mco5KQ6SHgps.png)

 <script setup>

    
 import { ref } from 'vue';
    
 const active =ref()
    
 </script>
    
 <template>
    
     <div>
    
     <van-tabbar v-model="active" placeholder>
    
         <van-tabbar-item icon="wap-home-o" name="home" :to="{name:'home'}">首页</van-tabbar-item>
    
         <van-tabbar-item icon="search" name="search" :to="{name:'Search'}">搜索</van-tabbar-item>
    
         <van-tabbar-item icon="user-o" name="mine">我</van-tabbar-item>
    
     </van-tabbar>
    
     </div>
    
 </template>
    
    
    
    
    javascript
    
    
![](https://ad.itadn.com/c/weblog/blog-img/images/2025-07-14/WFMfSRuTtHobjg6rVdcaP9ie2NsZ.png)