# 严格模式 ## 改造案例 我们可以发现下面的入口文件中我们将**新闻中心**和**新闻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/> ```