Vue-router

路由介绍

通俗解释：网址

专业解释：每次GET或者POST等请求，在服务端有一个专门的正则配置列表，然后匹配到具体的一条路径后，分发到不同的Controller，然后进行各种操作后，最终将html或数据返回给前端，这就完成了一次IO。前端路由，即由前端来维护一个路由规则。SPA只有一个html，整个网站所有的内容都在这一个html里，通过js来处理。

1.开始

1.在html文件内

router-link标签

默认渲染为a标签， to后面接路径（to="/xxx"）

router-view标签

路由匹配到的组件将在该标签范围内渲染

2.在js文件内

代码参考脚手架中router文件夹下的index.js

1.导入vue和vue-router,调用Vue.use(Router)  

2.定义路由组件 （对应hello）

例子： constFoo = { template:'foo'}

            constBar = { template:'bar'}

3.定义路由，每个路由应该映射一个(应该也能多个)组件 （对应routes：[]）

例子：const routes = [

{ path:'/foo', component: Foo },

{ path:'/bar', component: Bar }

]

4.创建router实例，传‘routes’配置 (对应new Router ,前面大概可加可不加变量名，好像var vm = new Vue)··

constrouter =newVueRouter({

routes// （缩写）相当于 routes: routes})

5.创建和挂载根实例

// 记得要通过 router 配置参数注入路由，// 从而让整个应用都有路由功能

constapp =newVue({

router

}).$mount('#app')

// 现在，应用已经启动了！

第五点为摘抄，本人暂不理解

2.动态路由匹配

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件（还不懂）.那么，我们可以在vue-router的路由路径中使用『动态路径参数』（dynamic segment）来达到这个效果：

routes: [// 动态路径参数 以冒号开头{ path:'/user/:id', component: User }]

route信息 ：$route.params （eg.$route.params.id），$route.query,$route.hash