路由介绍
通俗解释:网址
专业解释:每次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