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

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.成果演示

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