vue路由嵌套+路由导航-学习笔记

一、create vue lesson8-3 配置route css babel 安装axios
二、

1.assets不变
2.components

images-list.vue
<template>
	<div class="content">
		<div v-for="(item,index) in list" :key="index" class="item">
			<div>
				<img :src="item.pic" @click="playVedio(index)" />
				<div class="name-text">{{item.name}}</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props: ['list'],
		methods: {
			playVedio(e) { //跳到视频播放组件								
				let videoUrl = require('@/assets/1.mp4')
				switch (e) {
					case 0:
						videoUrl = require('@/assets/2.mp4')
						break;
					case 1:
						videoUrl = require('@/assets/3.mp4'); 
						break;
					case 2:
						videoUrl = require('@/assets/4.mp4');
						break;
				}
				this.$router.push({
					name: 'VideoPlay',
					params: {
						videoUrl: videoUrl
					}
				})
			}
		}
	};
</script>

<style scoped="scoped">
	.content {
		width: 100%;
		height: 100%;
		display: flex;
		flex-flow: row wrap;
		flex: 2;
	}

	.item {
		width: 150px;
		margin-bottom: 20px;
	}

	.name-text {
		margin-top: -20px;
		color: black;
		font-family: "Microsoft JhengHei";
		font-weight:bold;
	}

	img {
		width: 150px;
	}
</style>

imgdetail-list.vue

<template>
	<div class="content">
		<div v-for="(item,index) in list" :key="index" class="item">
			<div>
				<img :src="item.pic" />
				<div class="name-text">{{item.name}}</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props: ['list']
	};
</script>

<style scoped="scoped">
/* 	.content {
		width: 100%;
		height: 100%;
	} */

	.item {
		width: 100%;
		margin-bottom: 50px;
	}

	.name-text {
		color: red;
	}

	img {
		max-width: 340px;
		object-fit: contain;
		justify-items: center;
	}
</style>

photo2.vue

<template>
	<div >
		<img :style="{width:width}" class="image-wrap" :src="url" />
		<div class="name">{{name}}</div>
	</div>
</template>

<script>
	export default{
		props:['url','name'],
		data(){
			return{
				width:''
			}
		},
		created() {
			let img=new Image();
			img.src=this.url;
			
			let screenWidth=screen.availWidth;
			this.width=`${screenWidth/2-10}px`;
		}
	}
</script>

<style scoped="scoped">
.image-wrap{
	padding: 0;
	border-radius: 5px;
}
.name{
	margin-top: -25px;
	color: navajowhite;
	font-family: "arial black";
}
</style>

photo-flow.vue

<template>
	<div class="images-wrap" :list="list">
		<div>
			<div v-for="(item,index) in list1" :key="index">
				<photo :url="item.pic" :name="item.name"></photo>
			</div>
		</div>
		<div>
			<div v-for="(item,index) in list2" :key="index">
				<photo :url="item.pic" :name="item.name"></photo>	
			</div>
		</div>	
	</div>
</template>

<script>
	import Photo from "./photo2.vue"
	export default{
		components:{
			Photo
		},
		props:['list'],
		data(){
			return{
				list1:[],
				list2:[]
			}
		},
		created(){
			for(let i=0;i<this.list.length;i++){
				if((i+1)%2==0){
					this.list2.push(this.list[i])
				}else{
					this.list1.push(this.list[i])
				}
			}
		}
		
	}
</script>

<style scoped="scoped">
	.images-wrap{
		width: 100%;
		display: flex;
		flex-direction: row;
		flex: 2;
		justify-content: space-around;
		flex-wrap:wrap;
/* 		column-gap: 20px; */
	}
</style>

search-input.vue

<template>
	<div class="header">
		<div class="header-wrap">
			<slot name="left"></slot>
			<div class="search-box">
				<div class="iconfont icon-baseline-search-px"></div>
				<input class="input" type="search" placeholder="请输入查询的内容" />
			</div>
			<slot name="right" :heartNum="heartNum">
				{{heartNum}}
			</slot>
		</div>
	</div>
</template>

<script>
	export default{
		data: function() {
			return {
				heartNum: 10,
			}
		}
	}
</script>

<style scoped="scoped">
	.header {
		width: 100%;
	}

	.header-wrap {
		width: 100%;
		display: flex;
		flex-direction: row;
		height: 30px;
		margin-left: 15px;
		margin-top: 20px;
		
	}
	.search-box{
		width: 60%;
		display: flex;
		flex-direction: row;
		align-items: center;
		vertical-align: middle;		
		background-color: white;
		border-radius: 15px;		
	}
	.input {
		outline: none;
		border: none;
	}
</style>

tab-bars.vue

<template>
	<div class="tab-wrap">
		<router-link to="/home" class="iconfont icon-home tab-item"/>
		<router-link to="/aaa" class="iconfont icon-fenlei_ tab-item"/>
		<router-link to="/aaa/男" class="iconfont icon-plussign tab-item"/>
		<router-link to="/aaa/女" class="iconfont icon-message1 tab-item"/>
		<router-link to="/bbb" class="iconfont icon-user-plus tab-item"/>
	</div>
</template>

<script>
	export default{
		
	}
</script>

<style scoped="scoped">
	.tab-wrap{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
	}
	.tab-item{
		font-size: 24px;
		line-height: 24px;
		margin-top: 8px;
	}
	.router-link-active { 
		font-size: 32px; 
		color:palevioletred; 
	}
</style>

top-menu.vue
<template>
	<div class="menu-wrap">
		<router-link :to="item.url" v-for="(item,index) in menus" 
			@click="menuClick(index)"  :key="index" class="item">
			{{item.name}}
		</router-link>
	</div>
</template>
<script>
	export default {
		name: "topMenu",
		props: ['menus']
	};
</script>
<style>
	.menu-wrap {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
	
	}
	.item {
		font-size: 18px;
		line-height: 18px;
		margin-left: 15px;
		margin-top: 10px;
		color: #000000;
		
	}
	.router-link-exact-active {
		font-size: 24px;
		line-height: 24px;
		margin-left: 15px;
		margin-top: 10px;
		padding-bottom: 2px;
		border-bottom: 1px solid;
		color: white;
	
	}
</style>

3.router

import Vue from ‘vue’
import VueRouter from ‘vue-router’
import Home from ‘…/views/Home.vue’
import ImageList from “…/views/image-listV.vue”
import ImgdetailList from “…/views/imgdetail-listV.vue”

Vue.use(VueRouter)

const routes = [{
path: ‘/’,
name: ‘Home’,
component:Home,
redirect:’/home’,
meta: {
requiedLogin: true
}
},
{
path: ‘/home’,
components:{
default:Home,
home:ImageList
} ,
meta: {
requiedLogin: true
},
children: [
{ path: “”, components:{home:ImageList} },
{ path: “image”, components:{home:ImageList} },
{ path: “image/:gender”,components:{home:ImageList} , props:true },
{ path: “detail”, components:{home:ImgdetailList} }
]
},
{
path: ‘/videoplay/:videoUrl’,
name: ‘VideoPlay’,
props: true,
component: () => import(’…/views/video-play.vue’),
meta: {
requiedLogin: true
}
},
{
path: ‘/login’,
component: () => import(’…/views/pass-login.vue’)
},
{
path: ‘/aaa’,
component: () => import(’…/views/aaa.vue’)
},
{
path: ‘/aaa/:gender’,
props: true,
component: () => import(’…/views/aaa.vue’)
},
{
path: ‘/bbb’,
component: () => import(’…/views/bbb.vue’)
}
]

const router = new VueRouter({
routes
})

export default router

4.views
aaa.vue

	<image-list :list="list"></image-list>
	<div class="footer">
		<tab-bars></tab-bars>
	</div>
</div>

bbb.vue

Home.vue

image-listV.vue

imgdetail-listV.vue

<template>
	<div>
		<imgdetail-list :list="imglist"></imgdetail-list>
	</div>
</template>

<script>
	import ImgdetailList from "../components/imgdetail-list.vue"
	export default {
		components: {
			ImgdetailList
		},
		data() {
			return {
				imglist: [{
						pic: require('../assets/images/1.jpg'),
						name: '一休来了'
					},
					{
						pic: require('../assets/images/2.jpg'),
						name: '我是传说'
					},
					{
						pic: require('../assets/images/3.jpeg'),
						name: '不怕热的北极熊'
					},
					{
						pic: require('../assets/images/4.jpg'),
						name: '酷姐一枚'
					}
				]
			}
		}
	}
</script>

<style scoped="scoped">
</style>

pass-login.vue

<!-- 密码登录组件 -->
<template>
	<div class="content">
		<div class="mobile-input">
			<input type="number" v-model="mobileNum" placeholder="输入手机号" class="mobile" />
			<input type="password"  v-model="passwd" placeholder="输入帐号密码" class="mobile" />
		</div>
		<div class="find-mm small-text">找回密码</div>
		</view>
		<button class="login-btn" @click="loginClick">立即登录</button>
		<div class="reg-text">
			<div class="small-text">还没有帐号,立即注册</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				mobileNum: '', //手机号
				passwd: '' //密码
			}
		},
		methods: {
			loginClick() {
				var param={
					userId:this.mobileNum,
					passwd:this.passwd
				};
	
				this.axios.get("/login",param)
					.then(res=>{
						console.log(res)
						if(res.data.code==0){
							window.sessionStorage.setItem("user",res.data.name)
							let redictUrl=this.$route.query.redirect;
							this.$router.push(redictUrl);						
						}							
					});
			}
		}
	}
</script>

<style scoped="scoped">
	.content {
		width: 100%;
		height: 100%;
		position: relative;		
	}

	.mobile-input {
		/* margin-top: 120px; */
	}

	.mobile {
		font-size: 18px;
		line-height: 18px;
		width: 92%;
		margin-left: 4%;
		padding-top: 10px;
 		padding-bottom: 10px; 
		margin-top: 50px;
		margin-bottom: 10px;
		border-bottom: 1px solid #D8D8D8;
	}

	.find-mm {
		position: absolute;
		right: 10px;
	}

	.login-btn {
		width: 80%;
		height: 40px;
		margin-top: 120px;
		margin-left: 30px;
		margin-right: 30px;
		font-size: 18px;
		background-color: #ffaaff;
		border-radius: 25px;
	}

	.small-text {
		font-size: 14px;
		line-height: 14px;
		color: gray;
	}

	.reg-text {
		margin-top: 30px;
		text-align: center;
	}
</style>

video-play.vue

<template>
  <div id="app">
<!--    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div> -->
    <router-view/>
  </div>
</template>

<style lang="less">
	body{
		padding: 0;
		margin: 0;
	}
	.footer {
		width: 100%;
		height: 40px;
		position: fixed;
		bottom: 0;
		left: 0;
		background: #708090;
	}
	#app{
		min-height: 700px;
		background: url(./assets/images/bg.jpg);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center 0;
	}
</style>

6.main.js

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

Vue.config.productionTip = false
axios.defaults.baseURL="http://localhost:3000"
Vue.use(VueAxios,axios)

router.beforeEach((to,from,next)=>{
     //在每一个路由被处理前,会执行该回调函数
	if(to.matched.some(function(router){
		return router.meta.requiedLogin;
	})){      //当前要跳转的路由地址,需要用户登录以后才能访问
	      let user=window.sessionStorage.getItem("user") ;
          if(user==null) next({ path: '/login', query: { redirect: to.fullPath } })
          else next();
	}else{   //无需校验
		next(); } //放行,执行后续操作	
})

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

三.效果图