鍍金池/ 問答/HTML/ vue-router 起始路徑不是"/",怎么匹配path?

vue-router 起始路徑不是"/",怎么匹配path?

我在 "http://localhost/question/123/answer/456" 頁面中使用vue-router,代碼是這么寫的:

var author = {
    template: "#author",
    data: function () {
        return {
            author: json["answer"]["author"]
        }
    },
    methods: {
        getUserLink: getUserLink
    },
}

Vue.component("author", author);

var router = new VueRouter({
    mode: "history",
    routes: [
        {
            path: "/question/:questionId(\d+)",
            components: {
                author: author
            }
        },
        {
            path: "/question/:questionId(\d+)/answer/:answerId(\d+)",
            components: {
                author: author
            }
        }
    ]
});
    
new Vue({
    router,
    el: document.getElementById("root"),
});

HTML代碼:

<html>
<head>
    <base href="/"/>
</head>
<body>
    <div id="root">
        <!-- 省略其他html代碼 -->
        <div class="sidebar">
            <router-view name="author"></router-view>
        </div>
    </div>
    <script id="author" type="text/x-template">
        <!-- 省略author組件內(nèi)容 -->
    </script>
</body>
</html>

期望的效果是:
在 "http://localhost/question/123/answer/456" 頁面會顯示author組件,點擊某個button,不進行頁面跳轉(zhuǎn),切換到"http://localhost/question/123" ,然后author組件不顯示。

可結(jié)果是在兩個地址下的author組件都不顯示了,我猜會不會是路徑?jīng)]有匹配上?
如果不用vue-router,author組件是能正常顯示的,說明組件沒有問題,
難道只能在 "http://localhost" 頁面中使用vue-router,才能匹配path?

剛用vue-router,不怎么會用,求各位大神指點

回答
編輯回答
陌顏

router 配置有問題

{
            path: "/question/:questionId(\d+)",
            components: {
                author: author
            }
        },

應該改成

{
        path: "/question/:questionId(\d+)",
        component: author
},
2018年3月7日 05:46
編輯回答
念初

我找到問題所在了,多個組件用components沒有錯,單個組件用component,是我的path寫錯了,正則表達式應該是兩個反斜杠:

{
        path: "/question/:questionId(\\d+)",
        component: author
},

至于切換路徑時隱藏author組件的需求,似乎不能通過vue-router來做,還得用v-if或者v-show

2017年6月20日 21:18