1. 守卫
说明:三个不一定同时使用,按需加载
1.1全局守卫
分为全局前置守卫和全局后置守卫
(1)全局前置守卫钩子函数:
是当前项目中所有的路由规则被访问之前,可以进行一定的验证和拦截操作
router.beforeEach((to,from,next)=>{
//to 目标路由地址
//from 来源路由地址
//next 函数,用来执行或改变默认的路由规则
})
(2)全局后置守卫钩子函数 没有next函数
是当前项目中所有的路由规则被访问之后,没有验证和拦截的功能,一般就做记录
router.beforeEach((to,from)=>{
//to 目标路由地址
//from 来源路由地址
})
在router->index.js中增加全局守卫
添加守卫之后只有满足某些条件的时候使用next()才能进入跳转。
实例:
判断用户是否登录,通过缓存(sectionstorage)存储标识,之后再全局守卫中去获取这个标识,通过判断标识来跳转
首先需要把路由定义为router,再将router导出。 位置在路由导出之前写
在router-index.js
// 全局守卫
router.beforeEach((to,from,next)=>{
//如果去的是登录,直接跳转
if(to.path=='/login'){
next()
}
//如果去的不是登录,需要判断是否登录
//在登陆的时候进行了缓存,如果登陆了就可以进行next(),
var isLogin = sessionStorage.getItem('isLogin')
if(isLogin){
next()
}
})
//login.vue
login(){
if(this.user =='admin'&&this.pass =='123'){
// 设置一个表示用来判断是否登录,即如果可以登录,进行缓存
sessionStorage.setItem('isLogin',1)
// 编程式导航
this.$router.push('/index')
}else{
alert('账号密码输入错误')
}
}
1.2 路由独享守卫
路由独享守卫写在路由映射表配置规则中
在router->index.js的路由中做配置
//router-index.js
{
path:'/movie',
component:movie,
// 进入之后 路由的独享守卫
beforeEnter(to,from,next){
var type = sessionStorage.getItem('type')
if(from.path =='/index/home'&& type=='1'){
next()
}else{
next('/index/home')
}
},
},
1.3 组件内部守卫
组件内部守卫是写在组件内部的,beforeRouteEnter和components是同级别的。
组件内部守卫共分为3个:
1.beforeRouterEnter
在此钩子函数中可以获取不到this
beforeRouterEnter(to,from,next){
if(){
next()
}else{
next('/index/home')
}
}
2.beforeRouterLeave
在此钩子函数中可以获取到this
beforeRouterLeave(to,from,next){
console.log(this)//this是当前组件实例
}
3.beforeRouterUpdate
在此钩子函数中可以获取到this
//动态路由的参数发生变化时,会自动执行。
beforeRouterUpdate(to,from,next){
console.log(this)//this是当前组件实例
}
组件内部守卫 beforeRouteEnter小实例,只有来源路径为/index/home是,才能进入下一层路由,否则的话回到/index/home:
export default {
//组件内部守卫
beforeRouteEnter(to, from, next) {
if(from.path=="/index/home"){
next()
}else{
next('/index/home')
}
},
components: {},
data() {
return {
};
},
methods: {},
mounted() {
},
};
2. 别名
alias:直接给路由重新赋值新名字
在使用时可以用/f替代/food
{
path:'/food',
// 别名
alias:'/f',
component:food,
},
3. name使用
如果页面中的顶部或者底部有公用的样式(模块)可以使用name属性,在app.vue中设置,可以做到全局修改内容
//路由中增加name
{
path:'/food',
// 别名
alias:'/f',
name:'美食',
component:food,
},
//app.vue中使用
<template>
<div id="app">
<div>{{$route.name}}</div>
<router-view/>
</div>
</template>
4.懒加载
懒加载有两种方式:两种方式没有任何区别,第二种是第一种的简写。
//动态import
// 第一种方式
const home =()=>Promise.resolve(import('../pages/home'))
const order =()=>Promise.resolve(import('../pages/order'))
const mine =()=>Promise.resolve(import('../pages/mine'))
// 第二种
const login =()=>import('../pages/login')
5. mode模式
两者区别:
1.地址栏是否带#
2.如果是history 会把/index/food/detail/id 解析为地址,那么一旦与后台接口重名,那么就会先加载后台数据.
//hash 默认的打包方式 地址栏带#
//history 打包后地址栏不带#
const router = new Router({
mode: 'history',
routes: [
{
path: '/', // 默认进入路由[写在第一个]
redirect: '/home' //重定向
},
{
path: '/login',
name: 'login',
component: LoginPage
},
{
path: '**', // 错误路由[写在最后一个]
redirect: '/home' //重定向
}
]
});
6. axios
使用axios之前需要先进性下载
npm i axios --save
post请求和get请求传参时使用的对象名不同。
post:data:{}
get:params:{}
//post请求
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
});
get请求:
axios({
method: 'get',
url: '/user/12345',
params: {
firstName: 'Fred',
lastName: 'Flintstone'
}
});
axios可以进行分离,代码更加简洁,不用在每个组件中都引用axios
在util中新建request.js文件:
request.js中
import axios from "axios"
export const requestFoodDetail = (foodId)=>{
return axios({
url: "api/getFoodDetail",
method: "get",
params:{
foodId:foodId
}
})
}
组件中:引入request.js文件
通过res获取数据
mounted(){
requestFoodDetail(this.$route.params.foodId).then((res)=>{
// console.log(res.data.detail)
this.data = res.data.detail
})
}
7.项目的大致流程
1.初始化项目 vue init webpack 项目名称
2.配置项目目录,即补充未存在的文件
3.清空项目,清空默认的内容,然后写自己的内容
4.路由配置 (一级,二级) 先写组件 在配置路由
路由的引入 通过懒加载方式 进行引入
5.守卫 进行守卫的设置
6.请求渲染页面
8. $route $router
区别?
$route :路由信息 可以拿参数
$router :路由实例 push replace go 方法