vue-router常见问题

vue-router常见问题

早安，打工人。说“上班”，就感觉像是为生活所迫，不情不愿。说“打工”，就像是带着美好的憧憬，用努力和汗水去创造未来！早安！打工人！

重定向页面

1、第一种方法

const router = new VueRouter({
    routes:[
        { path:'/a',redirect:'/b' }
    ]
})

2、第二种方法

const router = new VueRouter({
    routes:[
        { path:'/a',redirect:{name:'foo'}}
    ]
})

3、第三种方法

const router = new VueRouter({
    routes:[
        {
            path:'/a',
            redirect:to =>{
                const {hash,params,query} =to
                if(query.to === 'foo'){
                    return { path:'/foo',query:null }
                }else{
                    return '/b'
                }
            }
        }
    ]
})

路由传参数

第一种params传参

1、编程式导航形式传参，通过name匹配路由【不会在URL路径中显示，刷新页面参数丢失】

//传递方式，通过name匹配路由
this.$router.push({
    name:'name', //路由中配置的name名
    params:{id:123}
});
//获取参数方法
this.$route.query.name
//传参后形成的路径，刷新页面时参数丢失
---/path

2、编程式导航形式传参，通过path匹配路由【在URL路径中显示，刷新页面参数不丢失】

//配置路由
path:'/path/:id'
//传递方式，通过path匹配路由，且在path后面跟上对应的值
this.$router.push({
    path:`/path/${id}`
})
//获取参数方法
this.$route.params.id
//传参后形成的路径，刷新页面时参数不丢失
---/path/id(值)

3、router-link形式传参【在URL路径中显示参数，刷新页面参数不丢失】

//配置路由
path:'/path/:id'
//传递方式，在path后面跟上对应的值
<router-link :to="`/path/${id}`"><router-link>
//获取参数方法
this.$route.params.id
//传参后形成的路径，刷新页面时参数不丢失
---/path/id(值)

第二种query传参---(推荐)

1、编程式导航形式传参，通过name匹配路由【在URL路径中？后面显示参数，刷新页面不丢失】

//传递方式，通过name匹配路由
this.$router.push({
    name:'name', //路由配置中的name名
    query:{id:'123'}
});
//获取参数
this.$route.query.name
//传递后形成的路径，刷新页面时参数不丢失
---/path?id=123

2、编程式导航形式传参，通过path匹配路由【在URL路径中？后面显示参数，刷新页面不丢失】

//传递方式，通过path匹配路由
this.$router.push({
    path:'/path',
    query:{id:'123'}
});
//获取参数
this.$route.query.name
//传递后形成的路径，刷新页面时参数不丢失
---/path?id=123

3、router-link形式传参【在URL路径中？后面显示参数，刷新页面不丢失】

//传递方式
<router-link :to="/path?id=123"><router-link>
//或者
<router-link :to="{path:'/path',query:{id:'123'}}"><router-link>
//获取参数
this.$route.query.name
//传递后形成的路径，刷新页面时参数不丢失
---/path?id=123

第三种meta(路由元信息)获取参数

//路由
{
    path:'/home',
    name:'home',
    component:load('home'),
    meta:{title:'首页'}
}
//获取路由参数方法
this.$route.meta.title

路由懒加载

function load(component) {
    //return resolve => require([`views/${component}`], resolve);
    return () => import(`views/${component}`);
}

const routes = [
    {
        path: '/home',
        name: 'home',
        component: load('home'),
        meta: {
            title: '首页'
        },
    },
]

动态加载路由

使用Router的实例方法addRouter来实现动态加载路由，一般用来实现菜单权限

使用时要注意，静态路由文件不能有404路由，而要通过addRouter一起动态添加进去

const routes = [
    {
        path: '/overview',
        name: 'overview',
        component: () => import('@/views/account/overview/index'),
        meta: {
            title: '概况预览',
            pid: 888,
            nid: 666
        },
    },
    {
        path: '*',
        redirect: {
            path: '/'
        }
    }
]
vm.$router.options.routes.push(...routes);
vm.$router.addRoutes(routes);

路由跳转打开新窗口

const obj = {
    path:'/home', 跳转的路由地址
    query:{id:'123'} //可以带参数
}
const {href} = this.$router.resolve(obj);
window.open(href,'_blank');
---------------------或者-----------------------
handelLink(row){
    let link = this.$router.resolve({
        path:'/home',
        query:{id:row.id}
    });
    window.open(link.href,'_blank')
}