二、Vue菜鸟小教程-vue-router的简单入门程序

最新推荐文章于 2025-04-25 14:07:27 发布

爱上喝水的女孩

最新推荐文章于 2025-04-25 14:07:27 发布

阅读量1k

点赞数

分类专栏： Vue 文章标签： vue-router

Vue 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个基于Vue.js的路由实践案例，从引入Vue和Vue-router开始，构建了包含多个组件的页面结构，定义了导航栏组件及不同视图组件，并通过路由配置实现了页面间的跳转。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用vue.js做项目的时候，一个页面是由多个组件构成，所以在页面跳转的时候，并不适合用传统的href，于是vue-router应运而生。这算是学习Vue的第二阶段吧，前几天大概的把一些基本知识浏览了一遍，今天就在网上找了这么一个小程序来巩固一下吧。

vue-router入门小程序

1.首先引入vue和vue-router包。

可以使用cdn和npm的方式，作为初学者还是先使用cdn的方式比较好。

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

淘宝镜像  cnpm install vue-router

2.构建页面结构

<div id="app">
	<top-bar></top-bar>
	<!--定义头部-->
	<hr />
	<p>email to: {{email}}</p>
	<hr />
	<!--路由出口，路由匹配到的组件将在这里渲染-->
	<router-view></router-view>
	<footer-bar></footer-bar>		
</div>

//router-link相当于<a>标签通过to属性来制定链接
			 var topbarTemp = `//这里是es6的模板字符串，不是单引号，是Tab键上面的符号。
              <nav>
                 <ul>

//NavList是源数据组，item是数组元素迭代的别名。
                    <li v-for="item in NavList">
                       <router-link to="item.url">{{item.name}}</router-link>//v-bind:to="item.url"缩写:to="item.url"

                    </li>
                 </ul>
              </nav>
              `;

定义组件

 Vue.component(tagName,options)其中tagName为组件名，options为配置选项。

Vue.component('top-bar',{
           	template:topbarTemp,
           	data:function(){
           		return{
           		NavList:[
           			    {name:'首页',url:'/home'},
           			    {name:'产品',url:'/product'},
           			    {name:'服务',url:'/service'},
           			    {name:'关于',url:'/about'}
           			]
           		}
           	}
           });
         
//        定义组件footer-bar
          Vue.component('footer-bar',{
          	template:`
          	   <footer>
          	     <hr/>
          	     <p>版权所有@flydragon</p>
          	   </footer>
          	`
          });

4.创建home和product模板

var home = {
        	template:`<div> {{ msg }} </div>`,
        	data:function(){
        		return { msg:'this is home view' }
        	}
        };
//      创建product模块
        var product = {
        	template:`<div>{{msg}}</div>`,
        	data: function () {
        		return { msg:'this is product view' }
        	}
        }

5.定义路由对象

var router = new VueRouter({
        	routes:[
        	  {path: '/home', component : home },
        	  {path: '/product', component : product }
        	]
        });

6.创建和挂载根实例，这里有两种方式书写。

var app = new Vue({
        	el:"#app",
        	data:{
        		email:'flydragon@gmail.com',
        	},
        	router:router
        });
//      var app = new Vue({
//      	router
//      }).$mount("#app");

注：在vue组件中data必须写为函数，且需要用return来返回参数，但是当data为空时，即使不写return也不会报错。

v-if和v-show的区别：

同样都是条件判断语句，那么这两者有什么却别呢？

v-if是惰性的，如果在初始渲染时条件为假，则什么也不做，在条件第一次变为真时才开始局部编译，（编译会被缓存起来），

相比之下，v-show简单的多元素适中被编译并保留，只是简单的基于css切换。一般来说v-if有更高的切换消耗，而v-show有更高的初始渲染消耗，因此如果需要频繁切换v-show较好，如果在运行时条件不大可能改变v-if较好。

同上面的例子，但是这里遇到一个问题，就是如何定义样式呢，怎么添加class呢，后续会讲解。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<title>火星时代导航简写二程序</title>
	<script type="text/javascript" src="vue.js"></script>
	<script type="text/javascript" src="vue-router.js"></script>
	<style>
		*{margin: 0px;padding: 0px;}
		#app{min-width: 1400px;}
		img{position: absolute;top: 5px;left: 20px;}
		nav{width:100%;height:50px;background: pink;position: relative;}
		ul{position: absolute;top: 20px;left: 250px;}
		li{list-style: none;width: 100px;height: 20px;display: inline-block;text-align: center;background: cyan;margin: 0px 5px;padding: 5px 0px;border-radius: 5px 5px 0px 0px;}
		a{text-decoration: none;color: gray;}
		
	</style>
</head>
<body>
  <div id="app">
  	<top-bar ></top-bar><!--头部导航部分-->
  	<router-view></router-view><!--内容显示区域-->
   </div>	
   <script>
  	var topbarTemp=` 
  	  <nav>
  	  <img src="3.png" />
  	  	<ul>
  	  		<li v-for="item in NavList">
  	  			<router-link :to="item.url">{{item.name}}</router-link>
  	  		</li>
  	  	</ul>
  	  </nav>
  	`;
 
  	Vue.component('top-bar',{
  		template:topbarTemp,
  		data:function(){
  			return{
  				NavList:[
  				  {name:'首页',url:'/home'},
  				  {name:'产品',url:'/product'},
  				  {name:'服务',url:'/service'},
  				  {name:'关于',url:'/about'}
  				]
  			}
  		}
  	});
  	//创建模块
  	
  	var home = {
  		template:"<div><h2>{{msg}}</h2></div>",
  		data:function () {
  			return {msg:"这是首页页面内容"}
  			}
  	};
  	
  	var product = {
  		template:"<div><h2>{{msg}}</h2></div>",
  		data: function () {
  			return{msg:"这是产品页页面内容"}
  		}
  	};
  	
  	var service = {
  		template:"<div><h2>{{msg}}</h2></div>",
  		data: function(){
  			return {msg:"这是服务页页面内容"}
  		}
  	};
  	
  	var about = {
  		template:"<div><h2>{{msg}}</h2></div>",
  		data: function (){
  			return {msg:"这是关于页页面内容"}
  		}
  	}
  	
  	//定义路由对象
  	
  	var router = new VueRouter({
  		routes:[
  		  {path:"/home",component:home},
  		  {path:"/product",component:product},
  		  {path:"/service",component:service},
  		  {path:"/about",component:about}
  		]
  	});
  	
  	var app = new Vue({
  		el:"#app",
  		router
  	})
 </script>
</body>
</html>