初识Vue多路由

分手后的思念是犯贱 2021-11-22 12:50 477阅读 0赞

Vue当下最火爆的前端框架之一，之前一直在使用jquery,最近一直听到Jquery已经过时的声音，为了跟上步伐，最近抽空要恶补一番Vue的知识。本文简单学习一下Vue的路由，Vue.js 路由允许我们通过不同的 URL 访问不同的内容，通过 Vue.js 可以实现多视图的单页Web应用（SPA）。

1、学习成果及项目结构

单页效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlbmdjaGVuZ3d1MjAxMg_size_16_color_FFFFFF_t_70][]

webpack项目目录

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlbmdjaGVuZ3d1MjAxMg_size_16_color_FFFFFF_t_70 1][]

2、代码实现：

(1)css文件

app.css

#app {
    		font-family: 'Avenir', Helvetica, Arial, sans-serif;
    		-webkit-font-smoothing: antialiased;
    		-moz-osx-font-smoothing: grayscale;
    		text-align: center;
    		color: #2c3e50;
    		width: 100%;
    		height: 100%;
    	}
    
    	#middle-content {
    		flex: 1;
    		display: flex;
    		flex-direction: row;
    	}
    
    
    	.author-con{
    		width: 150px;
        min-width: 120px;
        min-height: 200px;
    	}
    
    	.author-con-header{
    		padding: 0px;
    		width: 150px;
    		height: 48px;
    		line-height: 48px;
    		background: #FF6A00;
    	}
    
    	.note-con{
    		flex: 1;
        min-width: 200px;
        min-height: 200px;
    	}
    
    	.note-con-header{
    		font: "microsoft yahei";
    		font-size:20px;
    		height: 48px;
    		line-height: 48px;
    		text-align: -webkit-center;
    		background: #FFE4C4;
    	}

note.css

.note-list {
    		text-align: -moz-left;
    		text-align: -webkit-left;
    		text-indent: 1em;
    	}
    
    	.note-list>div {
    		padding-top: 5px;
    		font: "arial black";
    		font-size: 18px;
    		padding-bottom: 10px;
    		display: flex;
    		flex-direction: row;
    	}
    
    
    	.note-list-left {
    		float: left;
    		 text-align: -webkit-left;
    	}
    
    	.note-list-right{
    		float: left;
    		flex: 1;
    	}
    
         .note-list-left-div{
    		 margin-right: 10px;
    		 width: 150px;
    		 max-width: 150px;
    		 max-height: 250px;
    		 overflow: hidden;
    	 }
    
    	.img-hw {
    		max-width: 150px;
    	}
    
    	.title{
    		font-family: "arial black";
    		font-size: 22px;
    		padding-bottom: 10px;
    	}
    
    	.content{
    		font-size: 15px;
    		font-family: "arial rounded mt bold";
    		text-indent: 1em;
    	}

menu.css

.router-link-noraml{
      text-decoration: none;
      color:blueviolet;
    }
    
    .router-link-exact-active{
        color: #FF6A00;
    }
    
    .menu-item-normal{
    		padding: 0px;
    		width: 150px;
    		height: 48px;
    		line-height: 48px;
    		text-align: -webkit-left;
    		text-align: -moz-left;
    		text-indent: 1em;
        margin-top: 1px;
        margin-bottom: 1px;
        background: #FFE4C4;
    }
    
    .menu-item-active{
      background: #42B983;
      font-size: 20px;
    }

（2）项目入口模板  App.vue

<template>
    	<div id="app">
    		<div style="height: 70px;">
    			<h1>赖人看书</h1>
    		</div>
    		<div id="middle-content">
    			<div class="author-con">
    				<div class="author-con-header">武侠大师</div>
                     
    				<router-view  name='left'></router-view>
    			</div>
    			<div class="note-con">
    				<div class="note-con-header">作品集</div>
                      
    				<router-view   name='right'></router-view>
    			</div>
    		</div>
    	</div>
    </template>
    
    <style>
    	 /* 导入样式 */
    	 @import url("css/app.css");
    </style>
    
    <script>
    	// 默认模板配置   name可以直接写在<template  name='App'></template>
    	export default {
    		name: 'App',
    		data(){
    			return{
    				
    			}
    		}
    	}
    </script>

(3)作者目录BookMenu .vue  ，作者作品集 JinYong.vue 、GuLong.vue、LiangYuSheng.vue、WoLongSheng.vue、    HuangYi.vue

BookMenu.vue

<template>
    	<div id="meun">
          <router-link class="router-link-noraml" v-for="(author,index) in authors" :key="index"  :to="author.path">
           	<div  class="menu-item-normal"  @click="select(author,index)">
               {
       {author.name}}
           </div>
        </router-link>
    	</div>
    </template>
    
    
    <style scoped="scoped">
    	 @import url("../css/menu.css");
    </style>
    
    <script>
    	export default {
    		name: 'BookMenu',
    		data() {
    			return{
    				 authors: [{
    					name: '金庸',
              //path定义路由的url,对用App模板中声明好的路由位置
    					path: '/',
           
    				}, {
    					name: '古龙',
    					path: '/GuLong',
             
    				}, {
    					name: '梁羽生',
    					path: '/LiangYuSheng',
           
    				}, {
    					name: '卧龙生',
    					path: '/WoLongSheng',
           
    				}, {
    					name: '黄易',
    					path: '/HuangYi',
          
    				}]
    			}
    		},
    		methods:{
    			select:function(author,index){
              
    			}
    		}
    	}
    </script>

作品集结构相同，只贴一个JinYong.vue

<template>
         <div class="note-list">
         	<div v-for="note in  notes">
         		<div class="note-list-left">
         			<div class="note-list-left-div"><img class="img-hw" :src="note.url" alt="icon"></div>
         		</div>
         		<div class="note-list-right">
         			<div class="title"><strong>{
       {note.name}}</strong></div>
         			<div class="content">{
       {note.content}}</div>
         		</div>
         	</div>
         </div>
    </template>
    
    <style>
      @import url("../css/note.css");
    </style>
    
    <script>
      export default {
        name: 'JinYong',
        data(){
          return {
            notes: [{
              name: '飞狐外传',
              url: 'http://zuopinj.com/d/file/wx/jinyong/2015-02-06/3fc8b0c006e3244e50c782040df8599c.jpg',
              content: '辽东大侠胡一刀与苗人凤比武中，被人设计下毒害死，胡夫人自刎殉夫，幼子胡斐本是要托付苗人凤照顾，不料田归农等人欲除掉小胡斐，客栈的下人平阿四因受过胡一刀恩惠，遂冒着生命危险偷偷将他带走，临走时抢到了胡家的家传刀法，自此两人隐姓埋名，胡斐刻苦练习家传武功。胡斐失踪后，苗人凤四处派人打听没有音信，于是每年去拜祭胡一刀夫妇以慰他们在天之灵。在一次祭拜回家的路上，遇到了强盗拦路打劫，他出手救下了家破人亡的官府千金南兰，之后便结为夫妻。然而，苗人凤是江湖出身，不懂得体贴情趣，而南兰是官府出身，需要男人风雅斯文、懂得女人的小性儿，两人之间逐渐有了隔膜。而自从见到文质彬彬、善于心计的田归农之后，南兰对苗人凤更是疏远，终于在生下女儿苗若兰不久后与田归农私奔。两人一路逃到山东商家堡，遇上阎基率领土匪打劫镖师马行空的镖银。阎基当年也参加了谋害胡一刀之事，并从胡家秘笈中撕下了两页才练成了今日的武功，看到田归农之后，便主动将抢劫得来的银子分给了他。此时，苗人凤追赶上来，南兰听到女儿哭声居然狠心不见，受到藏在这里避雨的小胡斐的指责，几人尴尬离去。'
            }, {
              name: '雪山飞狐',
              url: 'http://zuopinj.com/d/file/wx/jinyong/2015-02-06/a1bfa7cb8487497467914dad6e1715f2.jpg',
              content: '传说中，明末李闯兵败后，留下了一批价值连城的巨额宝藏，开启宝藏的秘密被闯王手下胡苗范田四大贴身护卫分别掌握。四姓的后人为了揭开这个秘密，数代间结下无数纠葛情仇，最终，胡家传人胡一刀与苗家传人苗人凤两位不世出的英雄豪杰进行了一场惊心动魄的生死决战，决战中，两人惺惺相惜，但田家后人田归农为了宝藏的秘密，暗下毒手，在胡一刀与苗人凤决战时以毒杀害胡一刀，胡一刀临终前将初生的儿子胡斐交予忠仆平阿四。这部小说于一九五九年发表，十多年来，曾有好几位朋友和许多不相识的读者希望我写个肯定的结尾。仔细想过之后，觉得还是保留原状的好，让读者们多一些想像的余地。有余不尽和适当的含蓄，也是一种趣味。在我自己心中，曾想过七八种不同的结局，有时想想各种不同结局，那也是一项享受。胡斐这一刀劈或是不劈，在胡斐是一种抉择，而每一位读者，都可以凭着自己的个性，凭着各人对人性和这个世界的看法，作出不同的抉择。'
            }, {
              name: '连城诀',
              url: 'http://zuopinj.com/d/file/wx/jinyong/2015-02-06/c1769abccb029e148907ec991995fde5.jpg',
              content: '《连城诀》是从金庸埋藏心底的一个儿时故事发展出来的。他家有个叫和生的长工，是个残疾的驼子，小时他发现爸爸妈妈对和生很客气，从来不差和生做什么事，只是让他在家扫地、抹尘，接送孩子们上下学堂。遇到下雪、下雨的日子，和生总是抱着他上学，是他记忆中一个很亲切的老人。和生是江苏丹阳人，家里开一家小豆腐店，父母替他跟邻居一个美貌的姑娘对了亲。家里积蓄了几年，就要给他完婚了，结果他被一家财主诬陷为贼，下到狱中，关了两年多才放出来。父亲、母亲都气死了，未婚妻给财主少爷娶了去做继室。有一天和生在街上撞到财主少爷，取出一直藏在身边的尖刀，将那财主少爷刺了个重伤。和生也不逃。正好金庸的爷爷查文清做丹阳知县，重审狱中每一个囚犯，得知和生的冤屈，十分同情，不过他刺人行凶确是事实，也不便擅放。查文清辞官时，索性悄悄将和生带回家来。和生当然不是真名。'
            }, {
              name: '天龙八部',
              url: 'http://zuopinj.com/d/file/wx/jinyong/2015-02-06/0ee23585ffa139ecfccbc79921fe1446.jpg',
              content: '天龙八部乃金笔下的一部长篇小说，与《射雕》，《神雕》等 几部长篇小说一起被称为可读性最高的金庸小说。《天龙》的故事情节曲折，内容丰富，也曾多次被改编为电视作品。是金庸作品中集大成的一部。故事以北宋末年动荡的社会环境为背景，展开波澜壮阔的历史画卷，塑造了乔峰、段誉、 虚竹、慕容复等形象鲜明的人物，成为武侠史上的经典之作。《天龙八部》于一九六三年开始在《明报》及新加坡《南洋商报》同时连载，前后写了四年，中间在离港外游期间，曾请倪匡兄代写了四万多字。倪匡兄代写那一段是一个独立的故事，和全书并无必要联系，这次改写修正，征得倪匡兄的同意而删去了。所以要请他代写，是为了报上连载不便长期断稿。但出版单行本，没有理由将别人的作品长期据为己有。'
            }, {
              name: '射雕英雄传',
              url: 'http://zuopinj.com/d/file/wx/jinyong/2015-02-06/0217a8526b06385f234378ba2579e41f.jpg',
              content: '南宋末年，金兵入侵，朝廷奸臣当道。全真派丘处机因杀死汉奸王道乾，被官兵追杀，逃到江南一个小村牛家庄，与隐居在此处的爱国义土郭啸天和杨铁心一见如故，以“靖、康”为他俩即将出生的孩子命名，并留下一对短剑作为信物。三人酒醉之后。杨妻包惜弱在外面忽然发现一个受伤的官兵，于是偷偷将其救下。哪知却为郭、杨两家带来无尽的灾难。原来，此人竟是金国六王子完颜洪烈，因为追杀丘处机被打伤，得包惜弱相救后，竟然对她一见钟情，于是勾结南宋官员段天德对郭、杨迫害。郭啸天死亡、杨铁心不知去向，已怀身孕的郭夫人李萍被段天德抓走，之后经过千辛万苦逃到大漠，生下儿子郭靖，而杨夫人包借弱则被骗嫁给完颜洪烈，生子完颜康。丘处机得知两家被害的消息后，一路对凶手进行追查，与江南七怪发生误会。双方不打不相识，定下赌约：分别寻找杨、郭的后人并传授他们武功，于十八年后在烟雨楼比试高低。'
            }, {
              name: '白马啸西风',
              url: 'http://zuopinj.com/d/file/wx/jinyong/2015-02-06/2dc9000ea603d8d379398857fd54997e.jpg',
              content: '《白马啸西风》是一篇着力写“情”的小说。这篇小说以金银小剑三娘子上官虹和白马李三先后遇害拉开序幕，通过“吕梁三杰”追寻高昌迷宫的地图，展开了李文秀与苏普、马家骏、瓦耳拉齐等人之间的爱恨情仇，同时穿插了苏鲁克与盗贼汉人、瓦耳拉齐与车尔库之间的纠葛。全篇紧扣“高昌迷宫”这一情节焦点，展开了一场场汉人同哈萨克人之间的情与欲的角逐。\n在黄沙莽莽的回疆大漠之上，尘沙飞起两丈来高，两骑马一前一后的急驰而来。前面是匹高腿长身的白马，马上骑着个少妇，怀中搂着个七八岁的小姑娘。后面是匹枣红马，马背上伏着的是个高瘦的汉子。</p><p>那汉子左边背心上却插着一支长箭。鲜血从他背心流到马背上，又流到地下，滴入了黄沙之中。他不敢伸手拔箭，只怕这支箭一拔下来，就会支持不住，立时倒毙。谁不死呢？那也没什么。可是谁来照料前面的娇妻幼女？在身后，凶悍毒辣的敌人正在紧紧追踪。'
            }, {
              name: '鹿鼎记',
              url: 'http://zuopinj.com/d/file/wx/jinyong/2015-02-06/7ced95e75c117322612d1533a46f9b89.jpg',
              content: '这是金庸先生最後一部小说，也是登峰造极之作，是金大侠自言最喜欢之大作。 这部小说讲的是一个从小在扬州妓院长大的小孩韦小宝，他不会任何武功，却因机缘巧合闯入了江湖，并凭其绝伦机智周旋于江湖各大帮会、皇帝、朝臣之间并奉旨远征云南、俄罗斯之故事，书中充满精彩绝倒的对白及逆思考的事件，令人于捧腹之余更进一步深思其口才与机敏。小说中的人物如果十分完美，未免是不真实的。小说反映社会，现实社会中并没有绝对完美的人。小说并不是道德教科书。不过读我小说的人有很多是少年少女，那么应当向这些天真的小朋友们提醒一句：韦小宝重视义气，那是好的品德，至于其余的各种行为，千万不要照学。</p><p>我写的武侠小说长篇共十二部，短篇三部。曾用书名首字的十四个字作了一副对联：“飞雪连天射白鹿，笑书神侠倚碧鸳”。最后一个不重要的短篇《越女剑》没有包括在内。'
            }, ]
          }
        }
      }
    </script>

（4）主函数main.js

import Vue from 'vue'
    import Router from 'vue-router'
    import App from './App'
    
    import BookMenu from '@/components/BookMenu'
    import JinYong from '@/components/JinYong'
    import GuLong from '@/components/GuLong'
    import LiangYuSheng from '@/components/LiangYuSheng'
    import WoLongSheng from '@/components/WoLongSheng'
    import HuangYi from '@/components/HuangYi'
    
    Vue.use(Router)
    
    //声明路由
    const router = new Router({
    	routes: [{
    			path: '/',
    			components: {
    				'left': BookMenu,
    				'right': JinYong
    			},
    		},
    
    		{
    			path: '/GuLong',
    			components: {
    				'left':BookMenu,
    				'right': GuLong,
    
    			}
    		},
    
    		{
    			path: '/LiangYuSheng',
    			components: {
    				'left':BookMenu,
    				'right': LiangYuSheng,
    
    			}
    		},
    
    		{
    			path: '/WoLongSheng',
    			components: {
    				'left':BookMenu,
    				'right': WoLongSheng,
    
    			}
    		},
    
    		{
    			path: '/HuangYi',
    			components: {
    				'left': BookMenu,
    				'right': HuangYi,
    			}
    		},
    	]
    })
    
    //路由绑定组件
    new Vue({
    	router,
    	components: {
    		App
    	},
    	template: '<App/>'
    }).$mount("#app")

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlbmdjaGVuZ3d1MjAxMg_size_16_color_FFFFFF_t_70]: /images/20211122/be8df81a423349cfaf0758e4e3337a69.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlbmdjaGVuZ3d1MjAxMg_size_16_color_FFFFFF_t_70 1]: /images/20211122/ccfc28f0375b441d99775fde7d9fb7f7.png