params传参和query传参
是路由传参的两种常见形式,区别在于
- query传参,参数在url中可见,是标准的url传参形式。使用?分割参数和url地址
- params传参,参数在url默认是不可见的,除非设置了占位符
- query传参不怕刷新,刷新之后参数还在
- params传参除非设置了占位符,否则参数不能在刷新之后保存
编程式跳转
使用this.$router.push(路由对象)实现跳转
路由拦截
- beforeEach 就是路由拦截
router.beforeEach((to,from,next)=>{//beforeEach是在所有的路由跳转之前执行,常常用来做全局拦截
console.group('brfore')
console.log(to)//to表示到哪儿去
console.log(from)//from表示从哪儿来
console.log(next)
next()//表示继续执行,如果在beforeEach中不调用next就是不执行了
console.groupEnd()
})
- afterEach(不常用)
router.afterEach((to,from)=>{//afterEach表示路由跳转之后执行
console.group('after')
console.log(to)//to表示到哪儿去
console.log(from)//from表示从哪儿来
console.groupEnd()
})
在vue中使用图片
<img :src="XZ" alt />//本地图片
<img :src="WZ" alt />//远程图片
data() {
return {
// 此写法是因为webpack中要引入资源文件需要使用require或者import
// 此处使用的是file-loader加载器
// 另外一种写法引入文件
// import xx from '../assets/images/xy.jpg'
XZ: require('../assets/images/xy.jpg'),//网址图片的话就不需要require或者import了
// XZ: xx,
WZ:'网络地址链接'
}
}
路由登录判断
- 在登录页面中写一个点击事件loginHandle
methods: {
// 登录成功之后把把token写入本地存储
loginHandle() {
localStorage.setItem('token', '123')
this.$router.push({
name: 'User'
})
}
}
- 退出登录同理
methods: {
//点击之后token清除
logOut() {
localStorage.removeItem('token')
this.$router.push({
name: 'Login'
})
}
}
- 判断用户是否登录
// meta是元属性,可以在路由跳转的时候当参数进行传递,可以存储一些自定义数据
{
path: '/user',
name: 'User',
meta: {
needLogin: true// 是否需要登录
},
component: () => import('../views/User.vue')
},
router.beforeEach((to, from, next) => {
if (to.meta.needLogin) {// 是否包含这个属性
if (localStorage.getItem('token')) {// 判断当前用户有没有登录 看看有没有token数据
next()
} else {
next({// 跳转回Login
name: 'Login'
})
}
} else {
next()
}
})