Vue：（三）路由

（一）基础介绍

• vue-router用来构建SPA
• <router-link></router-link>或者this.$router.push({path:' '})
• <router-view></router-view>
• 什么是前端路由？
  • 路由是根据不同url地址展示不同的内容或页面
  • 前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做，之前是通过服务端根据url的不同返回不同的页面实现的
• 什么时候使用前端路由？
  • 在单页面应用，大部分页面结构不变，只改变部分内容的使用
• 前端路由的优缺点：
  • 优点：
    • 用户体验好，不用每次都从服务器全部获取，可以快速展现给用户
  • 缺点：
    • 不利于SEO
    • 使用浏览器的前进/后退键时会重新发送请求，没有合理地利用缓存
    • 单页面无法记住之前滚动的位置，无法在前进/后退时记住滚动的位置

（二）分类

• 动态路由匹配
• 嵌套路由
• 编程式路由
• 命名路由和命名视图（很少用）

（三）动态路由

模式	匹配路径	$router.params
/user/:username	/user/evan	{ username:'evan' }
/user/:username/post/:post_id	/user/even/post/123	{ username:'evan',post_id:123 }

（四）嵌套路由

• 路由嵌套路由

（五）编程式路由

• 通过js来实现页面跳转
  • $router.push("name")
  • router.push({path:"name"})
  • router.push({path:"name?a=123"})或者router.push({path:"name",query:{a=123}})
  • $router.go(1)

（六）命名路由和命名视图

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