vue-router的基本使用
什么路由
路由:通过互联网把信息从源头传递到目的地的活动
路由表:本质上是一个映射表,记录了数据包的指向
路由器提供了两种机制:路由和转送
- 路由决定数据包从来源到目的地的路径
- 转送将输入端的数据转移到合适的输出端
vue-router的认识
- vue-router是vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面
- 我们可以其官方网站对其学习:https://router.vuejs.org/zh/
- 在vue-router的单页面应用中,页面的路径的改变就是组件的切换
后端路由阶段
早期的网站开发整个HTML页面由服务器来渲染的
- 服务器直接生产渲染好对应的HTML页面,返回给客户端进行展示
但是一个网站,这么多页面服务器如何处理
- 一个页面有自己对应的网址,也就是URL
- URL会发送到服务器,服务器会通过正则对该URL进行匹配,并且最后交给一个Controller进行处理
- Controller进行各种处理,最终生成HTML或者数据,返回给前端
- 这就是一个IO操作
上面的这种操作最后由后端路由
- 当我们页面中需要请求不同的路径内容时,交给服务器来进行处理,服务器渲染好整个页面,并且将页面返回给客户端
- 这种情况下渲染好的页面,不需要单独加载任何的js和css,可以直接交给浏览器展示,这样也有利于SEO的优化
后端渲染的缺点:
- 一种情况是整个页面的模块由后端人员来编写和维护的
- 另一种情况是前端开发人员如果要开发页面,需要通过PHP和JAVA等语言来编写页面代码
- 而且通常情况下HTML代码和数据以及对应的逻辑会混在一起,编写和维护会非常麻烦
前端路由阶段
前后端分离阶段
- 随着Ajax的出现,由了前后端分离的开发模式
- 后端只提供API来返回数据,前端通过AJAX获取数据,并且可以通过JavaScript将数据渲染到页面中
- 这样做最大的优点就是前后端的责任清晰,后端专注于数据上,前端专注于交互和可视化上
- 并且当移动端(IOS/Android)出现后,后端不需要任何处理,依然使用之前的一套api即可
- 目前很多的网站依然采用这种模式
单页面阶段
- 其实SPA最主要的特点就是在前后端分离的基础上加了一层前端路由
- 也就是前端来维护一套路由规则
前端路由的核心是什么呢
- 改变URL,但是页面不进行整体的刷新
- 如何实现呢
HTML5的history模式:pushstate
浏览器窗口有一个history对象,用来保存浏览的历史
- length
- back() 移动到上一个访问页面,等同于浏览器的后退键
- forward():移动到下一个访问页面,等同于浏览器的前进键
- go():接受一个整数作为参数,移动到该整数指定的页面,移动到该整数指定的页面,比如go(1)相当于forward,go(-1)相当于back()
- pushState()用来在浏览历史中添加记录,接受三个参数,
- state :一个与指定网址相关的状态对象,popstate事件触发时,该对象会传入回调函数,如果不需要这个参数,此处可以填null
- title:新页面的标题,但是所有浏览器目前忽略这个值,因此这里填null
- url:新的网址,必须与当前页面处在同一个域,浏览器的地址栏将显示这个网址
- history.pushstate({},’’,‘foo’),浏览器地址栏立刻显示http://localhost:8080/foo;但并不会跳转到foo,甚至也不会检查foo是否存在,它只是成为浏览历史中的最新记录。总之,pushState方法不会触发页面刷新,只是导致history对象发生变化,地址栏会有反应
hash
location是javascript里边管理地址栏的内置对象,比如location.href就管理页面的url。
location.hash则可以用来获取或设置页面的标签值
location.hash='aaa'
location.href和location.hash的区别
- window.location.href
- 得到和使用的是完整的url,比如window.location.href="www.baidu.com”表示的是重新定向,页面跳转到新的页面。也可以通过window.location.href得到a标签的完整的href,比如如果使用href,那么可以得到完整的链接(url)
- window.location.hash
- 得到的是锚链接。相比如href,通过window.location.hash并不会跳转到新的链接,只会在当前链接里面改变锚链。并且如果有通过window.location.hash得不到完整的链接(URL),仅仅得到#book.
安装和使用vue-router
- router-link该标签是一个vue-router中已经内置的组件,它会被渲染成一个a标签
- router-view该标签会根据当前的路径,动态渲染出不同的组件
- 网页的其他内容,比如顶部的标签/导航,或者底部的一些版权信息等会和router-view处于一个等级
- 在路由切换时,切换的是router-view挂载的组件,其他内容不会发生改变
步骤:
-
安装vue-router, npm install vue-router --save
-
导入路由对象,并且调用vue.use(vuerouter)
use函数会调用VueRouter的install -
创建路由实例,并且传入路由映射设置
-
在vue实例中挂载创建的路由实例
router/index.js
///router/index.js**
import VueRouter from 'vue-router'
import Vue from 'vue'
import Home from '../components/Home'
import About from '../components/About'
//1 通过vue.use(插件), 安装插件
Vue.use(VueRouter)
//2 创建vuerouter实例
const routes =[
{
path:'/home',
component:Home
},
{
path:'/about',
component:About
}
];
//需要传入RouterOptions对象
//在RouterOptions对象中需要传入routes属性值,是一个数组
const router = new VueRouter({
routes
})
//3 将router实例传入到vue实例中
export default router
main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
///main.js*
import Vue from 'vue'
import App from './App'
import router from './router/index'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
components: {
App },
router:router,
template: '<App/>'
})
///App.vue
///App.vue
<template>
<div id="app">
<router-link to="/home">Home</router-link>
<router-link to="/about">About</router-link>
<!-- <Home></Home> -->
<!-- 在那里显示 -->
<router-view></router-view>
</div>
</template>
<script>
import Home from './components/Home.vue'
import About from './components/About.vue'
export default {
name: 'App',
components: {
Home
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
路由的默认路径
默认情况下,进入网站的首页,我们希望router-view渲染首页的内容。可以redirect实现
配置解析:
我们在router中又配置了一个映射
path配置的是根路径
redirect是重定向,也就是我们将路径重定向到/home的路径下
去除#改变路由和组件之间的应用关系
改变路径的两种方式:
- URL的hash
- HTML5的history
- 默认情况下,路径的改变使用URL的hash
- 如果希望使用HTML5中的history模式,非常简单,进行如下配置就可以
在VueRouter实例中添加mode
const router = new VueRouter({
routes,
mode:'history'
})
改变router-link的标签
router-link中的属性
- tag:tag可以指定router-link之后渲染成什么组件,比如下面的代码会渲染成button而不是a
<router-link to="/home" tag="button">Home</router-link>
<router-link to="/about" tag="button">About</router-link>
- replace:replace不会留下history记录,所以指定replace的情况下,后退键返回不能返回到上一个页面中
- active-class :当router-link对应的路径匹配成功时,会自动给当前的元素设置一个router-link-active的class,设置active-class可以修改默认的名称
- 在进行高亮显示的导航菜单或者底部tabbar时,会使用到该类
- 但是通常不会修改类的属性,会直接使用默认的router-link-active即可
<template>
<div id