onMounted(async () => { // router.beforeEach( (to,from) => { console.log(router,useRoute(),'router') // }) pagedata.filterData.type = props.typeId; await getProjectData(); pageLoading.value = true; });怎么在onMounted里router获取他是从哪个页面跳转过来的
时间: 2024-04-08 10:33:52 浏览: 21
在 `onMounted` 里面,你可以使用 `useRoute` 函数获取当前路由的信息,包括从哪个页面跳转过来。你可以通过 `useRoute().from` 来获取上一个路由的信息。例如,你可以将下面的代码添加到你的 `onMounted` 函数中:
```javascript
import { useRoute } from 'vue-router';
onMounted(async () => {
const previousRoute = useRoute().from;
console.log(previousRoute, 'previous route');
// 其他代码...
});
```
在控制台中,你将能够看到上一个路由的详细信息。注意,要确保你已经在项目中正确地安装和配置了 Vue Router。
相关问题
const Koa = require('koa'); const app = new Koa(); const Router=require('koa-router') //引入静态资源包 const serve = require('koa-static'); //挂载静态资源 app.use(serve(__dirname + '/static')); //实例化路由 const router=new Router() //定义路由 router.get('/',async (ctx)=>{ ctx.body={ name:'hello world get' } }) const {imgFun}=require('./fsImg') router.get('/imgs',async (ctx)=>{ console.log('shixian') let imgArr=await imgFun('img') ctx.body={ title:'相册', imgs:imgArr } }) router.post('/',async (ctx)=>{ ctx.body={ name:'hello build post' } }) router.get('/user',async (ctx)=>{ ctx.type='html'; ctx.body='<h1>用户</h1>' }) router.get('/shop',async (ctx)=>{ ctx.type='html'; ctx.body='<h1>商品</h1>' }) //挂载路由 app.use(router.routes()) app.listen(3000,()=>{ console.log('启动成功','http://localhost:3000/') }); 帮我检查下这段代码的问题并纠正
这段代码似乎没有明显的语法错误,但是有一些需要注意的地方:
1. 在调用 `imgFun` 函数之前需要先引入该模块,可以在文件开头添加 `const {imgFun}=require('./fsImg')`。
2. `router.get('/imgs',async (ctx)=>{...})` 中的回调函数中没有设置响应头,可以添加 `ctx.type = 'application/json';` 表示返回的是 JSON 格式数据。
3. 在 `app.listen` 函数中添加监听失败的回调函数,以便在启动失败时能够及时发现问题。
修改后的代码如下:
```
const Koa = require('koa');
const app = new Koa();
const Router = require('koa-router');
const serve = require('koa-static');
const { imgFun } = require('./fsImg');
app.use(serve(__dirname + '/static'));
const router = new Router();
router.get('/', async (ctx) => {
ctx.body = {
name: 'hello world get'
};
});
router.get('/imgs', async (ctx) => {
ctx.type = 'application/json';
let imgArr = await imgFun('img');
ctx.body = {
title: '相册',
imgs: imgArr
};
});
router.post('/', async (ctx) => {
ctx.body = {
name: 'hello build post'
};
});
router.get('/user', async (ctx) => {
ctx.type = 'html';
ctx.body = '<h1>用户</h1>';
});
router.get('/shop', async (ctx) => {
ctx.type = 'html';
ctx.body = '<h1>商品</h1>';
});
app.use(router.routes());
app.listen(3000, () => {
console.log('启动成功', 'http://localhost:3000/');
}).on('error', (err) => {
console.error('启动失败', err);
});
```
优化一下这段代码 methods: { handleScroll() { window.addEventListener("scroll", () => { this.scrollTop = window.scrollY; }); }, returnFn() { // this.$router.go(-1); console.log(111); }, }, mounted() { this.handleScroll(); }, beforeDestroy() { window.removeEventListener("scroll"); //离开当前组件别忘记移除事件监听哦 }, async created() { try { // 轮播图 let { data } = await getSwiperApi(); this.swiperList = data.data.list; let res = await getGoodsListApi(); this.goodsList = res.data.data.list; // console.log(this.swiperList); // 活动 let active = await getActiveApi(); this.activeList = active.data.data.list; // console.log(this.activeList); } catch (err) { console.log(err); } }, watch: { scrollTop: { handler: function (newValue, oldValue) { clearTimeout(this.timer); //清除之前的定时器 this.timer = setTimeout(() => { if (newValue == window.scrollY) { //滚动结束时执行 this.oldScrollTop = newValue; if (this.oldScrollTop > 100) { this.searchBgc = "#ccc"; } else { this.searchBgc = "transparent"; } } else { //滚动中时执行 if (this.oldScrollTop == oldValue) { //滚动开始时执行 // console.log("滚动开始"); } } }, 20); }, immediate: true, //立即执行handler函数 }, },
可以优化代码如下:
methods: {
handleScroll() {
this.handleScrollFn = () => {
this.scrollTop = window.scrollY;
}
window.addEventListener("scroll", this.handleScrollFn);
},
returnFn() {
// this.$router.go(-1);
console.log(111);
},
},
mounted() {
this.handleScroll();
},
beforeDestroy() {
window.removeEventListener("scroll", this.handleScrollFn); //移除事件监听
},
async created() {
try {
// 轮播图
let { data } = await getSwiperApi();
this.swiperList = data.data.list;
let res = await getGoodsListApi();
this.goodsList = res.data.data.list;
// console.log(this.swiperList);
// 活动
let active = await getActiveApi();
this.activeList = active.data.data.list;
// console.log(this.activeList);
} catch (err) {
console.log(err);
}
},
watch: {
scrollTop: {
handler: function (newValue, oldValue) {
clearTimeout(this.timer);
this.timer = setTimeout(() => {
if (newValue == window.scrollY) {
this.oldScrollTop = newValue;
if (this.oldScrollTop > 100) {
this.searchBgc = "#ccc";
} else {
this.searchBgc = "transparent";
}
} else {
if (this.oldScrollTop == oldValue) {
// console.log("滚动开始");
}
}
}, 20);
},
immediate: true,
},
},
优化的主要点如下:
1. 将事件监听函数 handleScroll 改为箭头函数,以便在 beforeDestroy 钩子中移除事件监听时可以正确地移除。
2. 在添加事件监听时,将 handleScroll 函数传递给 addEventListener,以便在 beforeDestroy 钩子中可以正确地移除事件监听。
3. 在 watch 中的 handler 函数中,同样将事件监听函数存储在变量中,以便在组件销毁时可以正确地移除事件监听。
4. 将 try/catch 包裹在 async/await 中,以便正确地捕获错误。