昨天困扰我许久的Vue-router的一个问题

export default new Router({
    routes: [{
            path: '/',
            name: 'home',
            component: Home,
            redirect: 'product',
            children: [{
                path: 'index',
                name: 'index',
                component: Index,
            }, {
                path: 'product',
                name: 'product',
                component: Product
            }, {
                path: 'detail',
                name: 'detail',
                component: Detail
            }]
        }]

这段代码会出现路由不跳转的问题，子路由设置跳转也无效，但是redirect重定向又可以成功跳转页面，这说明路由引入成功和组件挂载在vue实例上，但是就是不跳转。困扰了我许久

export default new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [{
        path: '/',
        name: 'home',
        component: Home,
        redirect: 'index',
        children: [{
                path: 'index',
                component: Index,
            },
            {
                path: 'product',
                component: Product,
            },
            {
                path: 'detial',
                component: Detial,
            }
        ]
    }, ]
})

但是这段代码就会运行成功

那么

  mode: 'history',
    base: process.env.BASE_URL,

这段代码有什么用？

1. mode history代表，路由不再显示hash，会像如下形式：

histroy:

localhost:8080/user/list

hash:

localhost:8080/#/user/list

2. base也比较好理解，代表着是基本的路由请求的路径。

如：

base: '/app/'

那么所有的请求都会在url之后加上/app/

应用的基路径。例如，如果整个单页应用服务在 /app/ 下，然后 base 就应该设为 "/app/"**