# 嚴格模式 ## 改造案例 我們可以發現下面的入口文件中我們將**新聞中心**和**新聞1**都寫出來了，那么會出現什么效果呢？ ``` <HashRouter> {/*導航 Link Vue的用法很相似 注意這里是大寫*/} <Link to={"/home"}>首頁</Link> <Link to={"/about"}>關于</Link> <Link to={"/news"}>新聞中心</Link> <Link to={"/news/1"}>新聞1</Link> <hr/> {/*路由指向哪個頁面 （組件）有兩個意義 定義路由指向 在哪個位置顯示頁面*/} <Route path={'/home'} component={Home}/> <Route path={'/about'} component={About}/> <Route path={'/news'} component={NewsCenter}/> <Route path={'/news/:id'} component={News}/> </HashRouter> ``` ## 問題呈現  我們發現在單擊**新聞中心**時只顯示**新聞中心**的頁面，而單擊**新聞1**時它顯示的不僅僅是**新聞1**對應的頁面而且還把**新聞中心**的頁面也顯示出來了。這是為什么？ 這是因為路由的匹配規則決定的。在單擊新聞中心時 路由只能匹配自己。 而在單擊新聞1時，它的路由是news/1 而新聞中心的路由是news，把新聞中心的路由包含進去了，所以也匹配到了。那么就顯示出來了。 ## 解決問題 工作中我們一般是希望只顯示自己對應的頁面信息，其它的頁面信息是不顯示的，如何解決？這時我們要借助于嚴格路由來進行解決。 ``` <Route path={'/news'} component={NewsCenter} exact/> <Route path={'/news/:id'} component={News} exact/> ```