vue route路由配置使用学习笔记

一、创建vue create l8_2 并且配置css babel route axios
二、结构布局

三、组件构成

四、具体代码
1.assets 包含字体和图标
2.components 包含tab-bars.vue和top-menu.js底部和顶部
（1）tab-bars.vue

<template>
	<div class="footer">
		<router-link to="/home" class="iconfont icon-xuanzhongshangcheng myicon"/>
		<router-link to="/chat" class="iconfont icon-chat myicon"/>
		<router-link to="/plus" class="iconfont icon-FontAwesomeuserplus myicon"/>
		<router-link to="/cata" class="iconfont icon-cata myicon"/>
		<router-link to="/me" class="iconfont icon-me myicon"/>
	</div>
</template>

<script>
	export default{
		
	}
</script>

<style scoped="scoped">
.footer{
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	display: flex;
	justify-content: space-around;
	background: #708090;
	flex-direction: row;
}
.myicon{
	font-size:26px;
	line-height: 26px;
	text-decoration: none;
}
.router-link-active{
	font-size:32px;
	line-height: 32px;
	color:palevioletred;
}

a:visited{/*伪类*/
	color: aliceblue;
}
</style>``

（2）top-menu.vue

<template>
	<div class="menu-wrap">
		<router-link v-for="(item,index) in menus" :key="index" :to="item.url" class="menu-btn">
			
				{{item.name}}
		</router-link>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				menus:[
					{
						name:'动态',
						url:'/home'
					},
					{
						name:'推荐',
						url:'/home/tj'
					},
					{
						name:'关注',
						url:'/home/gz'
					},
					{
						name:'精选',
						url:'/home/jx'
					}
				]
			}
		}
	}
</script>

<style scoped="scoped">
.menu-wrap{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background: #708090;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	font-size: 18px;
	line-height: 24px;
	color: black;
}
.router-link-exact-active{
	font-size: 24px;
	line-height: 24px;
}

a:visited{/*伪类*/
	color: aliceblue;
	
}
.menu-btn{
	text-decoration: none;
}
</style>

3.route index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

  const routes = [
  {
    path: '/',
	redirect:'/home'
    // name: 'Home',
    // component: Home
  },
  {
	path:'/home',
	component:Home,
	// childern:[
	// 	{
	// 		path:'/home/tj',
	// 		component: () => import('../views/home/tj.vue')
	// 	},
	// 	{
	// 		path:'/home/gz',
	// 		component: () => import('../views/home/gz.vue')
	// 	},
	// 	{
	// 		path:'/home/jx',
	// 		component: () => import('../views/home/jx.vue')
	// 	}
	// ]定义动态路由
  },
  {
	  path:'/home/:type',
	  component:Home
  },
  {
    path:'/cata',
    component: () => import('../views/cata.vue')
  },
  {
    path:'/chat',
    component: () => import('../views/chat.vue')
  },
  {
    path:'/plus',
    component: () => import('../views/plus.vue')
  },
  {
    path:'/me',
    component: () => import('../views/me.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

5.views cata.vue/chat.vue/Home.vue/me.vue/plus.vue
cata.vue chat.vue me.vue plus.vue 相同

<template>
	<div>
		cata
		<tab-bar></tab-bar>
	</div>
</template>

<script>
import TabBar from "../components/tab-bars.vue"
export default {
  components: {
    TabBar
  }
}
</script>

<style>
</style>

（2）Home.vue

{{name}}

<tab-bar></tab-bar>

5.app.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<style lang="less">

</style>

main.js**

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import "./assets/font/iconfont.css"

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

效果图