8-1#去哪儿网app#城市选择页面路由配置_去哪儿网rn路由跳转-CSDN博客

本文链接：https://blog.csdn.net/xinkuIe/article/details/109681639

本文档介绍如何在Vue.js项目中创建城市选择页面。首先，创建名为city-router的新分支，并在travel目录下切换到该分支。通过git命令获取最新代码，然后设置路由以引入City组件。在header.vue中使用router-link实现城市页面的跳转，并调整样式。同时，为实现返回功能，添加相应按钮并调整样式。整个过程中，利用变量简化样式复用，提高代码维护性。

摘要由CSDN通过智能技术生成

mission如题，做城市选择页面。

创建新分支city-router，然后travel下进入 git 或者cd travel

输入命令 git pull => git checkout city-router => npm run dev。

进入代码，创建city的路由：

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/pages/home/Home'
import City from '@/pages/city/City'

Vue.use(Router)

export default new Router({
    routes: [{
        path: '/',
        name: 'Home',
        component: Home
    }, {
        path: '/city',
        name: 'City',
        component: City
    }]
})

这里有个疑问，为什么home的path不用写/home

然后相应的创建city文件夹和City.vue，接着在header.vue中做页面跳转效果

<router-link to="/city">
    <div class="header-right">
        {{this.city}}
        <span class="iconfont arrow-icon">&#xe62d;</span>
    </div>
</router-link>

因为city组件已经在路由中做了配置，所以to可以转到city页面。

由于router-link默认颜色是别的颜色，所以在header.vue修改一下颜色就可以。

到此就做好了页面跳转效果。

接下来做返回的按钮(以及相应的css样式)，实现返回效果，直接返回根目录/

<router-link to="/">

又因为home和city的header.vue(头部)里的行高和高度样式都是.86rem，所以也可以在varibles里添加变量：

$headerHeight = .86rem

然后赋值：

// height :.86rem
// line-height :.86rem
height :$headerHeight 
line-height :$headerHeight

优点：更新网页或更改变量值时，则所有页面跟着一起变

提交gitee即可