Vue Router

this.$router.push

部分路由如下

{
        path: '/home',
        component: Layout,
        meta: { title: '首页', icon: '首页' },
        children: [{
                path: '',
                component: () =>
                    import ('@/views/home/index'),
                meta: { title: '首页' }
            },
            {
                name: 'node1',
                path: '/node',
                component: () =>
                    import ('@/views/a/Node'),
                meta: { title: 'node1' }
            },
            {
                name: 'node2',
                path: '/node2/:id/:name',
                component: () =>
                    import ('@/views/a/Node2'),
                meta: { title: 'node2' }
            },
            {
                name: 'node3',
                path: '/node3',
                component: () =>
                    import ('@/views/a/Node3'),
                meta: { title: 'node3' }
            },
            {
                name: 'node4',
                path: 'node4',
                component: () =>
                    import ('@/views/a/Node4'),
                meta: { title: 'node4' }
            }
        ]
    }

路由跳转代码

this.$router.push('node3');
this.$router.push({path:'node3'});// 可带query。使用了path，params参数就被忽略了。可直接写出完成路径

1. 将目标路由附加在from路由的最后一个/上，即

（1）如果from的path是/node，则会跳转到/node3

（2）如果from是path是/node2/:id/:name，则跳转到/node2/:id/node3

（3）因为node4的path前没有加'/'，所以，node4的路由是/home/node4，所以如果from的path是/home/node4，则跳转到/home/node3

导航守卫

在进入一个页面时，先执行全局级router.beforeEach，然后是路由级beforeEnter，然后是组件级beforeRouteEnter