码云创建city-router分支
然后在根目录下cmd,输入命令行
git pull
git checkout city-router
npm run dev
在router > index.js中配置路由
在pages文件夹下新建city文件夹
city文件夹下创建City.vue
路由配置好后,希望在首页点击北京时可以跳转city这个页面,可在header.vue组件通过router-link
标签设置to属性
为地址,可实现点击跳转。也就是声明式导航.
F12检查效果,发现他的外面加了一层a标签
现在需要在class="header-right"修改为白色就行。
Header.vue
<template>
<div class="header">
城市选择
<router-link to="/">
<div class="iconfont header-icon"></div>
</router-link>
</div>
</template>
<script>
export default {
name: 'CityHeader'
}
</script>
<style lang="scss" scoped>
@import '~styles/varibles.scss';
.header {
overflow: hidden;
height: $HeaderHeight;
line-height: $HeaderHeight;
text-align: center;
color: #fff;
background: $bgColor;
font-size: 0.32rem;
position: relative;
.header-icon {
position: absolute;
top: 0;
left: 0;
color: #fff;
width: 0.64rem;
text-align: center;
font-size: 0.4rem;
}
}
</style>
推送到分支,合并到主分支
git add -A
git commit -m'city-router'
git push
git checkout master
git merge origin/city-router
git push