当前位置:首页>正文

vue路由不跳转但是能进去页面 vue模板如何跳转到404页面

2023-04-10 20:05:29 互联网 未知

vue模板如何跳转到404页面

localhost:8080/xname/1 localhost:8080/xname/2 xname.vue只created一次怎样才能让1和2页面显示的数据不一样呢,尝试了下watch $route,我的xname.vue代码如下: created(){ this.fetchdata() }, watch:{ $route:fetchdata }, methods:{ fetchdata(){ console.log("created") } } 但是这种方式会存在下面的问题页面进入的时候执行了一次fetchdata,页面离开的时候又执行了一次fetchdata,每次进入页面都得刷新数据,没有缓存

vue路由跳转时判断用户是否登录功能

一丶首先在用户登录前后分别给出一个状态来标识此用户是否登录(建议用vuex);
import Vue from vue
import Vuex from vuex
Vue.use(Vuex)
var state = {
isLogin:0, //初始时候给一个 isLogin=0 表示用户未登录
}
const mutations = {
changeLogin(state,data){
state.isLogin = data
}
}
复制代码
二丶在用户登录时改变登录状态;
this.$store.commit(changeLogin,100) //登录后改变登录状态 isLogin = 100 ;
三丶重点来了;
在你的路由入口加上导航钩子,具体什么意思看代码;
一丶设置需要校验的路由
{ path: /admin,
component: Admin,
meta:{auth:true} // 设置当前路由需要校验 不需要校验的路由就不用写了;不要问为什么,自己去看官网
}
二丶路由跳转并校验
复制代码
router.beforeEach((to,from,next) => {
if(to.matched.some( m => m.meta.auth)){
// 对路由进行验证
if(store.state.isLogin==100) { // 已经登陆
next() // 正常跳转到你设置好的页面
}else{
// 未登录则跳转到登陆界面,query:{ Rurl: to.fullPath}表示把当前路由信息传递过去方便登录后跳转回来;
next({path:/login,query:{ Rurl: to.fullPath} })
}
}else{
next()
}
})

随便看看