vue路由

vue路由

  • 前言
  • 路由实例实现思路
  • 整个demo

前言

通过vue的路由可实现多视图的单页Web应用(基于html的SPA)!

中文文档:https://router.vuejs.org/zh/

什么是路由?

route:译为路由,即我们可以理解为单个路由或者某一个路由。

比如说我们买这个高铁票火车票回家的线路,这个线路就和路由有点像,就是路径,与我们生活中所说的路由器不相同。

routes:它是个复数,表示多个的集合才能为复数。

即我们可以理解为多个路由的集合,JS中表示多种不同状态的集合的形式只有数组和对象两种,事实上官方定义routes是一个数组;所以我们记住了,routes表示多个数组的集合。

router:译为路由器,上面都是路由,这个是路由器,我们可以理解为一个容器包含上述两个或者说它是一个管理者,负责管理上述两个;举个常见的场景的例子:当用户在页面上点击按钮的时候,这个时候router就会去routes中去查找route,就是说路由器会去路由集合中找对应的路由。

SPA是什么?

单页Web应用(single page application),就是只有一个Web页面的应用, 是加载单个HTML页面,并在用户与应用程序交互时动态更新该页面的Web应用程序。

单应用程序

概念:只有第一次会加载页面, 以后的每次请求, 仅仅是获取必要的数据.然后, 由页面中js解析获取的数据, 展示在页面中!(有点类似于ajax局部刷新的操作!)

传统多页面应用程序:对于传统的多页面应用程序来说,每次请求服务器返回的都是一个完整的页面!

优势

听起来就比之前要更快捷,不但减少了请求体积,加快页面响应速度,而且降低了对服务器的压力,让用户在web app感受native app的流畅。

路由实例实现思路

详细步骤

确保引入Vue.vue-router的js依赖
首先需要定义组件(就是展示不同的页面效果)
需要将不同的组件放入一个容器中(路由集合)
将路由集合组装成路由器
将路由挂载到Vue实例中
定义锚点
跳转

引入依赖库



注:cdn下载需要联网

定义自定义组件

const Home=Vue.extend({
			template:'

Home

首页所展示的组件内容
' }); const About = Vue.extend({ template:'

About

About组件内容
' });

extend是构造一个组件的语法器. 你给它参数,他给你一个组件,然后这个组件。

你可以作用到Vue.component这个全局注册方法里,也可以在任意vue模板里使用car组件。

定义路由

var  routes = [
			{name:'home',path:'/Home',component:Home},
			{path:'/About',component:About}
		]

定义路由器

const router = new VueRouter({routes});

将路由挂载到Vue实例中

var   vue=new Vue({
	router:router,
	data:function(){
		return{
		
		}
	}
}).$mount("#app");

定义锚点

router-view表示路由显示区域


使用RouterLink和RouterView组件导航

router-link表示路由导航
replace 无痕浏览
tag可改变router-link标签原有的类型

首页
关于我们

定义vue中导航中的后退-前进-编程式导航

为其编写事件


//后退一页
methods:{
			prev:function(){
				console.log("前一页的方法被调用!");
				this.$router.go(-1);
			},
//前进一页
			next:function(){
				console.log("后一页的方法被调用!")
				this.$router.go(1);
			},
//跳到指定的
			change:function(){
				console.log("跳转到指定页面的方法被调用!");
				this.$router.push({
					name:'home'
				});

整个demo





vue路由
    
    
	


首页 关于我们

你可能感兴趣的:(前端框架,vue,java,ajax,js)