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

1. 配置路由

1.1 导入路由工具

文件地址：src\router\index.js

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 //暴露路由对象

1.2 About路由测试

文件地址：src\views\AboutView.vue

<template><div class="about"><h1>早上好</h1></div>
</template><style>
@media (min-width: 1024px) {.about {min-height: 100vh;display: flex;align-items: center;}
}
</style>

1.3 挂载并导入路由

文件地址：src\main.js

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')

1.4 获取路由数据

导入工具useRoute，可以获取路由中携带的数据。

模板template模块通过RouterView标记显示路由地址所指向的组件内容。

文件位置：src\App.vue

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

2.路由地址参数(from App.vue)

RouterLink类似于a标记可实现页面跳转，该标记支持路由地址匹配，to属性为匹配地址目标

<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>

3.景点详情页面开发

3.1 开发搜索界面各组件

文件地址：src\views\Search.vue

3.1.1 script行为模块：

<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>

3.1.2 template结构模块

<template><div class="page-search"><!-- 标题 --><van-nav-bar title="搜索景点"/><!-- 搜索框 --><van-search v-model="sightName" show-actionlabel="景点"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>

3.2 导入搜索页面的路由

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

3.3 添加按键路由功能

文件地址：src\components\common\Footer.vue

<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>