Vue-router基本学习(1)
栏目: JavaScript · 发布时间: 5年前
内容简介:两种应用的优缺点:
多页面应用
:网页HTML文件是请求后台发过来的。每次切换页面都会从后台把页面文件传输回来。
单页面应用
:网页只有在第一次进入页面的、的时候请求服务器的HTML文件,接下来的页面跳转是基于内部的 router
。
两种应用的优缺点:
- 多页面应用只需要加载当前页面所需要的资源,所以首屏时间快。但是每切换一次页面都要去请求一次服务器资源。单页面应用第一次要将所有的资源全部加载,所以首屏时间慢,但是后续的跳转不需要再次向服务器发请求。
- 多页面应用可以直接实现SEO搜索,但是单页面得有一套单独的SEO方案。
- 单页面可以实现局部刷新,多页面实现不了。
这里稍微的讲了一些单页面和多页面的一些知识,大家要知道 Vue
是一个单页面应用,其页面的 跳转
需要通过路由: Vue-router
!!! vue-router
的安装我们已经在前面的文章里讲过了,今天这篇文章就讲 vue-router
的使用。
基本使用
src/router/index.js
import Vue from 'vue' import Router from 'vue-router' import Parent from '@/components/Parent' import Childs1 from '@/components/Childs1' import Childs2 from '@/components/Childs2' Vue.use(Router) export default new Router({ mode:'history', routes: [ { path:'/parent', name:'Parent', component:Parent }, { path:'/child1', name:'Childs1', component: Childs1 }, { path: '/child2', name:'Childs2', component:Childs2 } ] })
运行结果如下图:
我们输入不同的路由不同的组件被渲染出。首先我们将需要在路由里面渲染的组件引入,然后配置路由。 path:
是我们需要配置的路径名, component:
是我们需要在该路径下渲染的组件。
路由嵌套
我们在开发的过程中不应该只有一级路由。比如上面的例子, child
应该放在`parent的下面,name我们将怎么样实现路由的嵌套呢?
当然是用路由嵌套啦~
src/router/index.js
import Vue from 'vue' import Router from 'vue-router' import Parent from '@/components/Parent' import Childs1 from '@/components/Childs1' import Childs2 from '@/components/Childs2' Vue.use(Router) export default new Router({ mode:'history', routes: [ { path:'/parent', name:'Parent', component:Parent, children: [ {path:'child1', component: Childs1}, {path:'child2', component: Childs2} ] } ] })
Parent.vue
<template> <div> Parent <router-view> </router-view> </div> </template>
运行结果如下图:
Parent.vue
的 <router-view> </router-view>
是渲染其组路由组件的地方。我们可以看到url为 /parent
的时候,页面上只有paernt的字符串,当我们路由为两层的时候, parent
和 child
全部展示在页面上。 vue-router
会根据不同的路由加载不同的组件。
动态路由
如果我们要将某一种模式下的路由全部映射到同一个组件上,比如我们要将 '/user/tom'
和 '/user/David'
都匹配到同样组件下面,那么动态路由是我们不二的选择。
src/router/index.js
import Vue from 'vue' import Router from 'vue-router' import Parent from '@/components/Parent' import Childs1 from '@/components/Childs1' Vue.use(Router) export default new Router({ mode:'history', routes: [ { path:'/parent', name:'Parent', component:Parent, children: [ {path: 'child1/:name', component:Childs1} ] } ] })
Parent.vue
<template> <div> Parent <router-view></router-view> </div> </template>
Childs1.vue
<template> <div> Childs1-- -{{$route.params.name}} </div> </template>
运行结果如下图:
我们虽然在 /child1
后面输入不同的路径,但是最后全部映射到同一个组件上。 this.$route.params
对象存放我们的动态路由的内容。
动态路由引起的组件复用
动态路由就是将不同的路由映射到同一个组件上,如果两个路由是匹配到 同一组件
,那么Vue不会将当前组件销毁重建,而是直接替换不一样的内容,实现组件的复用。
src/router/index.js同上
Parent.vue
<template> <div> Parent <router-view></router-view> </div> </template>
Childs1.vue
<template> <div> Childs1-- -{{$route.params.name}} <button @click="change">点我去aa</button> </div> </template> <script> export default { name:'Childs1', data(){ return{ title: 1 } }, methods:{ change(){ this.$router.push('/parent/child1/aa' + this.title++); } }, mounted(){ console.log('child1 mounted',new Date().toLocaleString()); } } </script>
运行结果如下图:
我们使用编程式导航来进行路由切换, title
的初始值唯一,在我们点击按钮进行页面切换的时候, title
没有变成初始值,而是 复用
了前一个页面的组件,在原来的基础上自增。第二章图片也显示,只有第一次进入的时候进入了生命周期钩子,以后的页面切换不再进入 钩子
。
编程式导航和声明式导航
编程式
导航是调用方法 push
进行路由跳转, 声明式
导航是类似于a标签一样的 <router-link to='/parent'></router-link>
的标签进行跳转。 to
属性的内容就是我们要跳转的目标路由。 声明式
导航最终渲染到页面也是a标签。
声明式导航在被点击的时候会调用编程式导航的方法。
Parent.vue*
<template> <div> <ul> <router-link to='/parent/child1/bb'> <li>点我去bb</li> </router-link> <router-link to='/parent/child1/cc'> <li>点我去cc</li> </router-link> <router-link to='/parent/child1/dd'> <li>点我去dd</li> </router-link> </ul> <router-view></router-view> </div> </template>
Childs1.vue
同上
运行结果如下图:
li
的外面包裹着 router-link
,当我们点击的时候,路由就会跳转到我们 to
指向的URL,我们点击按钮的时候,调用了'this.$router.push(url)'方法来进行跳转。这两种方法没有好与坏的区别,只是使用于不同的场景。
router.push()
push
往history栈中加入一条记录,所以当我们使用浏览器的后退按钮时,还能够回到这一页。
router.replace()
replace
是替换栈中当前页的记录,意味着history栈中不会再有当前页的记录。这种方法通常用来授权页,这样就不会有二次授权的情况出现。
router.go()
go
是告诉浏览器在history栈中前进或者后退几步,所以我们一般的页面跳转用 push
才能在栈中新增一条记录,便于 go
使用。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 一文读懂监督学习、无监督学习、半监督学习、强化学习这四种深度学习方式
- 学习:人工智能-机器学习-深度学习概念的区别
- 统计学习,机器学习与深度学习概念的关联与区别
- 混合学习环境下基于学习行为数据的学习预警系统设计与实现
- 学习如何学习
- 深度学习的学习历程
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
C# Primer Plus
Klaus Michelsen / Sams / 2001-12-15 / USD 49.99
C# Primer Plus is a tutorial based introduction to the C# language and important parts of the .Net Framework. Throughout the book the reader will be exposed to proven principles enabling him to write ......一起来看看 《C# Primer Plus》 这本书的介绍吧!