vue路由菜单切换

最新推荐文章于 2024-01-16 17:23:30 发布

Gjanuary

最新推荐文章于 2024-01-16 17:23:30 发布

阅读量239

点赞数

分类专栏：前端学习记录文章标签： vue vue.js

本文链接：https://blog.csdn.net/Gjanuary/article/details/117302571

版权

前端学习记录专栏收录该内容

75 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="vue.js"></script>
	<script type="text/javascript" src="vueRouter.js"></script>
	<script type="text/javascript">
		// 移动端布局设置，统一尺寸
		(function(doc, win) {
			    var docEl = doc.documentElement,
			        isIOS = navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
			        dpr = isIOS ? Math.min(win.devicePixelRatio, 3) : 1,
			        dpr = window.top === window.self ? dpr : 1, //被iframe引用时，禁止缩放
			        dpr = 1,
			        scale = 1 / dpr,
			        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
			    docEl.dataset.dpr = dpr;
			    var metaEl = doc.createElement('meta');
			    metaEl.name = 'viewport';
			    metaEl.content = 'initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale;
			    docEl.firstElementChild.appendChild(metaEl);
			    var recalc = function() {
			        var width = docEl.clientWidth;
			        if (width / dpr > 750) {
			            width = 750 * dpr;
			        }
			        // 乘以100，px : rem = 100 : 1
			        docEl.style.fontSize = 100 * (width / 750) + 'px';
			    };
			    recalc()
			    if (!doc.addEventListener) return;
			    win.addEventListener(resizeEvt, recalc, false);
			})(document, window);
	</script>
	<style type="text/css">
		*{
			text-decoration: none;
			padding: 0px;
			margin: 0px;
			color:white;
		}
		.cmType{
			width: 33.3%;
			float: left;
			text-align: center;
			list-style: none;
			height: 0.8rem;
			font-size: 0.4rem;
			line-height: 0.8rem;
			background-color: black;

		}
		#content_body{
			background-color: #A9A9A9;
		}

	</style>
</head>
<body>
<div id="app">
    <ul>
    	<li v-bind:class="typeTool"><router-link to="/girls">男装</router-link></li>
    	<li v-bind:class="typeTool"><router-link to="/boys">女装</router-link></li>
    	<li v-bind:class="typeTool"><router-link to="/childs">儿童装</router-link></li>
    </ul>


  	<div id="content_body">
  		<router-view></router-view>
  	</div>
   
</div> 
<script>

const girls  = { template: "<div>page1</div>" }
const bodys  = { template: '<div>page2</div>' }
const childs = { template: '<div>page3</div>' }
 

const routes = [
  	{ path: '/girls', component: girls },
  	{ path: '/boys', component: bodys },
  	{ path: '/childs', component: childs },
]
 

const router = new VueRouter({
  	routes // （缩写）相当于 routes: routes
})

const app = new Vue({
  	data:{
		typeTool:'cmType',
		newDate:'deno'
	},
	router,
}).$mount('#app')
</script>
</body>
</html>

效果：

Gjanuary

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue路由菜单切换

<!DOCTYPE html><head> <meta charset="UTF-8"> <script type="text/javascript" src="vue.js"></script> <script type="text/javascript" src="vueRouter.js"></script> <script type="text/javascript"> // .
复制链接

扫一扫