vue2视频教程系列第二十三节-路由-2

上一节课我们初步介绍了一下router.js。在这个文件里，我们首先要引入我们所需要的组件，在这里面，我们需要引入home.vue和about.vue。接下来是应用这个router组件，然后是在router实例里进行配置。

每个组件配置一个路径和一个name，表示我们在浏览器里输入这个路径时，vue自动匹配这个组件并显示出来。

{

path: '/home',

name: 'home',

component: Home

}

Routes是一个数组，我们用到多少页面就配置多少个路由。我们在这里配置的是home和about.如下：

routes: [

{

path: '/home',

name: 'home',

component: Home

},

{

path: '/about',

name: 'about',

}

]

我们虽然配置完了，但是在页面里输入正确的路径依然显示不了，为什么呢？

因为我们没有给这个动态加载的路由安放一个地方，也就是动态路由的出口并没有设置。我们需要在app.vue里放

<router-view></router-view>

页面里的内容显示出来啦！

当我们输入作意路径，页面都会显示相应的页面，是不是很神奇？

当我们不输入作何路径时，页面又会显示空白，为什么？因为我们没给人家匹配路由啦。人家找不到当然不会露面了。所以我们就会用到一个redirect，当我们找不到匹配的路由时，统统重定向到home组件去，设置如下：

{

path: '/',

redirect: '/home'

},

这样我们在浏览器里输入根路径，可以看到路径直接切换到home路径上去了，继而显示home组件的内容了！

还一个神奇的地方是：

我们当初用js或者jquery做tab切换时，非常麻烦的，但我们在vue里，只需两行就搞定！如何做？

我们只需在页面上

<router-link to="/home">首页/</router-link>

<router-link to="/about">关于</router-link>

PS：to一定要跟router.js里匹配对哈，否则….

看看浏览器里吧，怎么样？就这么爽快地完成了简单的tab切换！

VUE的便捷之处会让你越来越爱上它，甚至离不开它！所以大家每天学习一点点，不要落下噢！跟上跟上！过些时日，你会发现奇迹！

微号：duzhan99