vue路由嵌套+路由导航-学习笔记
程序员文章站
2024-01-15 19:51:10
...
一、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')
三.效果图
上一篇： 数据结构---带头结点的双向链表的增删查改1（C语言实现）
下一篇： Centos7安装Kibana