当前位置: 首页 > news >正文

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>

4.成果演示

脚部分中,“首页”与“搜索”功能可正常运行


http://www.mrgr.cn/news/62682.html

相关文章:

  • 数据库->数据库约束
  • Linux_02 Linux常用软件——vi、vim
  • 贪心day9
  • 小白从零开始配置pytorch环境
  • Docker学习笔记【从入门到精通】
  • 【测试平台】打包 jenkins配置和jenkinsfile文件
  • TransUNet 学习记录
  • 淘宝API接口(item_history_price- 淘宝商品历史价格信息查询)
  • idea git 设置Local Changes窗口
  • Python3 No module named ‘pymysql‘
  • SwiftUI(八)- 绑定对象与环境查询
  • vector的模拟实现
  • 【GO学习笔记 go基础】访问控制
  • 局域网实时监控电脑屏幕软件有哪些?8款优秀的局域网监控app!不看巨亏!
  • 使用Kubernetes自动化部署和管理容器化应用
  • 正则表达式(Regular Expressions)
  • zynq PS端跑Linux响应中断
  • 机器学习的模型评估与选择
  • Nodes —— Utility
  • 24下软考初级信息系统运行管理员,提供一条能过的野路子
  • 两数之和笔记
  • 通过js控制修改css变量
  • YOLOV8代码分析———持续更新中
  • LivePortrait代码调试—给图片实现动态表情
  • 2小时,我搭建了一整套车间生产看板
  • 做反向代购,采购订单应该怎么批量管理?