什么是路由?
-
后端路由：对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源，这个对应关系就是后端中的路由；
-
前端路由：对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现；在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）； #后边的内容 称为哈希（Hash）
-
单页面开发?
- Single Page Application
- 就是指系统只加载一次html资源，之后的操作交互、数据交互是通过路由、http请求来进行，页面并没有刷新。
- 优点:页面切换快、用户体验好。（避免了不必要的跳转和重复渲染）；服务器压力小，前后端职责分离，架构清晰
- 缺点:初次加载耗时多，前进后退不能使用浏览器的功能，页面切换需要自己建立堆栈管理；SEO难度较大。
- vue提供了一些技术以解决SPA的缺点
配置路由对象
npm install vue-router安装vue-router- 在router的主js文件中引入
import VueRouter from 'vue-router'
import 组件名 from '组件文件地址'
const routes = [
{
path:'/'//设置跳转到路由组件时的url
name:''//设置组件名,跳转时可以通过path或者name跳转
component:组件名
},
{
path:'',
name:'',
component:import (组件文件地址)//懒加载
}
]
var router = new VueRouter({
routes,
scrollBehavior(to,from,savedPosition){//非必选项,可以操作滚动条
return//希望滚动到的位置
}
})
//主入口文件(main.js)中引入路由
import router from 'vue-router'
//注入实例
new Vue({
router
})
动态路由
- 是在路由对象的path地址中拼接
/index/:参数名 - 通过
this.$route.params可以获取动态路由的参数
声明式路由
- 直接在template中使用
<router-link to="path"></router-link>进行跳转,这个标签默认渲染为a标签
router-link
- 必须有to属性,to的值可以是地址(字符串),也可以是对象
- params参数只有使用路由对象的name属性进行跳转时才可以使用
- 可以加入tag属性,将routerlink变更为想要的标签,比如
tag="li"
<router-link :to="{path:'路由组件地址',query:{键值对}}"</router-link>
<router-link :to="{name:'路由组件对象的name',query:{键值对}}"></router-link>
<router-link :to="{name:'路由组件对象的name',params:{键值对}}"></router-link>
编程式路由
- 编程式路由通过函数触发
this.$router.push()进行路由跳转 - 传入路径和参数的方法和声明式路由一样.
query和params
- 使用params传参只能用name来引入路由，即push里面只能是
name:'xxxx',如果这里写成了path，接收参数页面会是undefined - params是路由的一部分,必须要在路由后面添加参数名。query是拼接在url后面的参数，没有也没关系。
- 用query传参跳转的时候,地址栏可以看到参数,params传参跳转的时候,参数不会在地址栏显示(这点有些像get请求和post请求的区别)
路由守卫/路由导航/路由拦截
全局路由守卫
- 全局路由守卫在每次进行路由跳转时都会触发
//全局前置守卫
beforeEach(function(to,from,next){
//只有执行了next()函数,路由守卫才会继续往下走,进行跳转
//next参数可以是路由对象/地址,如果传入地址,会跳转到相应页面
})
//全局后置守卫
afterEach(function(to,from){
//此时页面跳转已经完成,不需要next
})
路由独享守卫
- 只会在跳转到此路由时触发
{
path:'/',
component:component,
beforeEnter(to,from,next){
//进入地址为path的路由时才会触发
}
}
组件内守卫
// 组件内的前置守卫
beforeRouteEnter(to, from, next) {
// 注意在该路由守卫中 this的指向不是当前的vue实例化对象
next(arg => {
// 这个参数就是vue的实例化对象
})
}
beforeRouteUpdate(to, from, next) {
// 在当前路由改变，但是该组件被复用时调用
// 可以访问组件实例 `this`
}
beforeRouteLeave(to, from, next) {
// 路由离开前触发的守卫
}
