Vue路由是怎么回事？

路由

这里补充下路由的大致概念：传统的php路由是由服务器端根据一定的url规则匹配来返回给前端不同的页面代码，如以下地址

https://isux.tencent.com/about 和 https://isux.tencent.com/recruit

注意这里只有about和recruit，这些不带xxx.html的地址其实是服务器端经过一层封装指定到某些文件上去。同样的道理，前端也可以根据带锚点的方式实现简单路由（不需要刷新页面）

https://zhitu.isux.us/index.php/preview/install#mac

其中#mac就是我们的锚点路由，注意开始我们在浏览器中打开的地址：

http://localhost:8080/#/，

路由让我们可以访问诸如http://localhost:8080/#/about/ 或者 http://localhost:8080/#/recruit这些页面的时候不带刷新，直接展示。现在回到我们刚才打开的App.vue文件中看这行代码

<router-view></router-view>

这句代码在页面中放入一个路由视图容器，当我们访问http://localhost:8080/#/about/的时候会将about的内容放进去，访问http://localhost:8080/#/recruit的时候会将recruit的内容放进去

如此看来，无论我们打开http://localhost:8080/#/about/ 还是http://localhost:8080/#/recruit页面中的图片都是公用部分，变得只是路由器里面的内容，那么路由器的内容谁来控制呢？

前面说的src/main.js中有一句引入路由器的代码。

import router from './router'

现在就让我们打开router目录下的js文件。

import Vue from 'vue'import Router from 'vue-router'import Hello from '@/components/Hello'import About from '@/components/about'import Recruit from '@/components/recruit'Vue.use(Router)export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello},
    {
      path: '/about',
      name: 'about',
      component: About},
    {
      path: '/recruit',
      name: 'recruit',
      component: Recruit}
  ]})

前面先引入了路由插件vue-router，然后显式声明要用路由 Vue.use(Router) 。注意到Hello，About等都是页面（也可以是组件），接着注册路由器，然后开始配置路由。

路由的配置应该一目了然，给不同的path分配不同的页面（或组件，页面和组件其实是一样的概念），name参数不重要只是用来做识别用的。看到这里就可以明白，前面说的红色框的内容，其实就是Hello里面的内容，打开components目录下的Hello.vue就能明白了。