第三天_路由_Vue.js2.0+Node+ES6+MongoDB全栈系统学习

什么是前端路由？

 路由是根据不同的url地址展示不同的内容或页面
 前端路由就是把不同路由对应不同的内容或者页面的任务交给前端来做，之前是通过服务器根据url的不同返回不同的页面

什么时候使用

 单页面应用程序，大部分页面结构不变，变动部分结构

优点与缺点

 优点：用户体验好，不需要每次从服务器全部获取，快速展示给用户
 缺点：不利于SEO,
           使用浏览器的前进，后退会重新发送请求，没有合理利用缓存
           单页面无法记住之前的滚动位置，无法在前进后退是定到之前对应的位置
           首次加载缓慢

vue-router用来构建SPA 单页Web应用（single page web application，SPA）
跳到指定的路由 （类似于a标签） 或者this.$router.push({path:''}) //通过代码方式进行页面调整
指令渲染

动态路由匹配

image.png

image.png

:goodsId :name 就是动态输入值 访问如下
http://localhost:8080/#/goods/23424/user/shasha
可以在页面显示路由内容 主语这里是route 不是 router

image.png

嵌套路由

路由里面嵌套路由，使用情形 左侧菜单 右侧内容展示
路由配置子路由

image.png

页面使用

image.png

编程式路由

通过js来实现页面的跳转
$router.push("name");
$router.push({path:"name"});
$router.push({path:"name?a=123"});或者$router.push({path:"name",query:{a:123}})
$router.go(1) 类似于history.go 功能

image.png

页面怎么获取到传递的参数

image.png

注意：
$route.params.goodsId params是动态路由传递参数
$route.query .goodsId query组件切换路由与路由之间的参数传递

命名路由和命名视图

给路由定义不同的名字，根据名字进行匹配
给不同的router-view定义名字。通过名字进行对应组件的渲染
router/index.js

image.png

App.vue

image.png

显示效果

image.png