vue 搭建导航栏、六个页面(两个子页面)示例

淩亂°似流年 2021-07-24 12:04 1122阅读 0赞

vue实例化
    
    	1、创建项目
    		vue init webpack xx
    		其中:
    		 	Install vue-router? Yes
    			其他选项n
    			安装选手动
    
    	解决问题:
    		(1)设置首页重定向默认路径后,点击其他路由,再点击首页,不显示默认路径
    			原因:路径不对
    
    				若'/'设置重定向为'/home/h2',,则只有到'/'才显示home/h2,
    				点击home不会显示h2
    
    			方案:在home的路由中再设置重定向,指向'/home/h2'
    
    		(2)将路由高亮设置到主入口App.vue中才能设置全局高亮,若在组件中且加了scoped,只会显示组件内的高亮
    
    		(3)在<router-view />周围加上keep-alive,切换页面保持指定路由切换前的状态
    			<keep-alive>
    				<router-view/>
    			</keep-alive>

代码示例:  
**App.vue主入口文件:**

<template>
      <div id="app">
        <router-view/>
      </div>
    </template>
    
    <script>
    export default { 
      name: 'App'
    }
    </script>
    
    <style>
    
    *{ margin:0;padding:0;border:0}
    body{ background-color:#f1f1f1;font-size:14px;}
    
    
    
    a{ 
      color:black;
      text-decoration:none;
    }
    
    .active{ 
      color:#39ac69;
    }
    
    </style>

**主路由js文件:**

import Vue from 'vue'
    import Router from 'vue-router'
    import Home from '@/containers/home'
    import Mine from '@/containers/mine'
    import Order from '@/containers/order'
    import Shop from '@/containers/shop'
    import N from '@/containers/404'
    import V1 from '@/containers/home/homee/view1'
    import V2 from '@/containers/home/homee/view2'
    
    Vue.use(Router)
    
    export default new Router({ 
    	linkActiveClass:'active',
      routes: [
    
      	{ 
      		path:'/',
      		redirect:'/home/homee'
      	},
      	{ 
      		path:'*',
      		component:N
      	},
        { 
          path: '/home',
          name: 'home',
          redirect:'/home/homee',
          component:Home,
          children:[{ 
    	      	path:'homee',
    	      	component:V1
    	      },
    	      { 
    	      	path:'homeee',
    	      	component:V2
    	      }
          ] 
        },
        { 
        	path:"/mine",
        	name:'mine',
        	component:Mine
        },
        { 
        	path:'/order',
        	name:'order',
        	component:Order,
        },
        { 
        	path:'/shop',
        	name:'shop',
        	component:Shop
        }
      ]
    })

**导航栏组件:**

<template>
    	<div class='nav'>
    		<ul>
    			<router-link to="/home">
    				<i class='iconfont' ></i>
    				<span class='title'>首页</span>
    			</router-link>
    
    			<router-link to="/shop">
    				<i class='iconfont' ></i>
    				<span class='title'>购物</span>
    			</router-link>
    
    			<router-link to="/order">
    				<i class='iconfont' ></i>
    				<span class='title'>订单</span>
    			</router-link>
    
    			<router-link to="/mine">
    				<i class='iconfont' ></i>
    				<span class='title'>我的</span>
    			</router-link>
    		</ul>
    	</div>
    </template>
    
    <script>
    import '@/assets/iconfont/iconfont.css'
    
    export default{ 
    	name:'nav',
    	data()
    	{ 
    		return{ 
    		
    		}
    	}
    }
    </script>
    
    <style lang='css' scoped>
    .nav{ 
    	position:fixed;
    	bottom:30px;
    	width:94.7%;
    	padding:10px;
    	background-color:#fff;
    
    }
    .nav ul{ 
    	height:50px;
    	width:100%;
    	display:flex;
    	text-align:center;
    
    }
    .nav ul a{ 
    	flex:1;
    	text-decoration:none;
    }
    .nav ul a i{ 
    	font-size:25px;
    }
    
    .title{ 
    	display:block;
    }
    .active{ 
    	color:#39ac69;
    }
    </style>

**404组件：**

<template>
    	<div>
    		404 NotFound
    		<Nav />
    	</div>
    </template>
    
    <script>
    import Nav from '@/components/nav'
    export default{ 
    	data()
    	{ 
    		return{ 
    
    		}
    	},
    	components:{ 
    		Nav
    	}
    }
    </script>
    
    <style lang='css'>
    </style>

**组件1到3:**

<template>
    	<div>
    		购物车/订单/我的   1到3组件中的不同处
    		<Nav />
    	</div>
    
    </template>
    
    <script>
    import Nav from '@/components/nav'
    export default{ 
    	data()
    	{ 
    		return{ 
    
    		}
    	},
    	components:{ 
    		Nav
    	}
    }
    </script>
    
    <style lang='css'>
    </style>

**组件4:**

<template>
    	<div>
    	
    		<ul>
    			<router-link to='/home/homee'>推荐1</router-link>
    			<router-link to='/home/homeee'>推荐2</router-link>
    		</ul>
    		
    		<keep-alive>
    			<router-view/>
    		</keep-alive>
    
    		<Nav />
    	</div>
    </template>
    
    <script>
    import Nav from '@/components/nav'
    export default{ 
    	data()
    	{ 
    		return{ 
    
    		}
    	},
    	components:{ 
    		Nav
    	}
    }
    </script>
    
    <style lang='css' scoped>
    ul a{ 
    	display:inline-block;
    	font-size:20px;
    	margin:0 20px;
    
    }
    ul{ 
    	width:95%;
    	text-align:center;
    	margin:0 20px;
    }
    .active{ 
    	color:red;
    }
    </style>

**组件4的两个子组件:**

<template>
    	<div>
    		推荐1/推荐2  两个子组件的不同处
    		
    	</div>
    </template>
    
    <script>
    
    export default{ 
    	data()
    	{ 
    		return{ 
    
    		}
    	}
    }
    </script>
    
    <style lang='css'>
    </style>

**最终效果:**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]: /images/20210724/737b7f39b1ea477d8a8b23f60cc04abb.png