学习 NodeJS 3-Vue-router

3 Vue-router

3.1 路由基础介绍

什么是前端路由？

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

什么时候使用前端路由？

• 在单页面应用，大部分页面结构不变，只改变部分内容的使用

前端路由有什么优点和缺点？

• 优点：用户体验好，不需要每次都从服务器全部获取，快速展现给用户
• 缺点：

1. 不利于SEO
2. 使用浏览器的前进、后退键的时候会重新发送请求，没有合理地利用缓存
3. 单页面无法记住之前滚动的位置，无法在前进、后退的时候记住滚动的位置

路由重点

• vue-router用来构建SPA
• <router-link></router-link>或者this.$router.push({path:''})
• <router-view></router-view>

路由分类 

1. 动态路由匹配
2. 嵌套路由
3. 编程式路由
4. 命名路由和命名视图

3.2 动态路由配置

什么是动态路由？

goods/:goodsId/user/:userName   必须符合路由规则

Vue-router其实就是对history的一个封装，history.go(0),history.back=history.go(-1)

url里面的#其实是默认使用的 hash 路由模式（index.js里的mode:'hash'），还可以用 history 路由模式。

@：别名的意思

3.3 嵌套路由

什么是嵌套路由？

路由嵌套路由，例如页面加载，菜单栏不动，内容变动。

3.4 编程式路由

什么是编程式路由？

通过js来实现页面的跳转

$router.push("name")

$router.push({path:"name"})

$router.push({path:"name?a=123"})或者$router.push({path:"name",query:{a:123}})

$router.go(1)

3.5 命名路由和命名视图

什么是命名路由和命名视图？

给路由定义不同的名字，根据名字进行匹配

给不同的router-view定义名字，通过名字进行对应组件的渲染