路由的使用及概念

路由的理解和使用
路由：就是根据不同的url地址来展示不同的页面或者内容。路由的作用就是展示不同的页面或者内容的。

①传统的后端路由展示
就是浏览器发起请求，后台拦截转发到controller控制器之后，在根据url或者其他方式返回到真实的html或Jsp页面。此时后台内是存在许多真实的html或jsp页面的。
②前端路由
就是登录页面跳转到index.html主页面之后，其他内容都是通过前端路由来在index.html页面上配装出来的“虚拟页面”，但是最终网站上仅仅保留一个index.html真实页面。就类似Vue的component组件一样，将不同的component组件拼装到index.html页面上，就组成了一个“虚拟的user.html”页面。
③什么时候使用前端路由？
答：在单页面应用，页面大部分的结构不改变，只有局部的内容需要改变时就采用前端路由方式。

路由的重点
1）路由的使用：

①vue-router用来构建SPA
②<router-link to=”/url”></router-link>底层本质就是<a></a>标签，作用：url地址的跳转。或者使用js代码来实现跳转：this.$router.push({path:’’})；
③<router-view></router-view>作用：展示指定组件的内容；
说明：<router-link>和<router-view>组合是搭配使用的；
1
2
3
4
Demo例子：

前端路由结合组件的使用，在index.html中配装“虚拟页面”;在商品父组件中拼配子组件，并且渲染到index.html页面中。步骤如下

①利用vue-CLI (vue command liner interface)脚手架来创建前端项目时，就自动生成了App.vue主入口；
②创建GoodsList.vue;

②创建Image.vue子组件

③创建Title.vue组件；

④在index.js文件中定义路由

⑤在GoodsList.vue渲染子组件