vue-router一些常用知识

最新推荐文章于 2022-09-16 11:47:19 发布

原创最新推荐文章于 2022-09-16 11:47:19 发布 · 207 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue-router

vue-js 同时被 2 个专栏收录

53 篇文章

订阅专栏

vue-router

5 篇文章

订阅专栏

本文介绍Vue.js中路由的使用方法，包括路由跳转前后事件的处理、页面滚动位置的控制技巧以及不同路由模式的选择。同时展示了如何通过代码实现具体的页面跳转和返回操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

路由跳转前发生的事件

router.beforeEach((to, from, next) => {
    console.log(to)
    next()
})

路由跳转后发生的事件

router.afterEach((to, from) => {
    console.log(to)
    sessionStorage.setItem('sTop',0)
    setTimeout(function () {
        //滚动条回到顶部
        window.scrollTo(0,sTop);
    },500)
})

详情页跳转

路由配置
{
    path:'/shop/detail/:id',
    name:'shopDetail',
    component: shopDetail,
    meta:{
        title:'商品详情',
    }
},
跳转
this.$router.push('/shop/detail/'+id)

路由的两种模式

const router = new Router({
    //mode : 'history',//不带#号
    //mode : 'hash',//默认模式hash
    routes: [
        {
            path: '/',
            name: 'login',
            component: login,
            meta: {
                title: '登录'
            }
        },
    ]
})