Vue学习之前端路由

前端路由

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

• 什么时候使用前端路由
  在单页面应用，大部分页面结构不变，只改变部分内容的使用

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

• 缺点：
  不利于SEO
  使用浏览器的前进，后退键的时候会重新发送请求，没有合理地利用缓存 。单页面无法记住之前滚动的位置，无法再前进，后退的时候记住滚动的位置

  vue路由常用模式

• vue-router用来构建SPA

• <router-link></router-link>或者this.$router.push({path:})

• <router-virew></router-view>

• 动态路由

模式	匹配路径	$route.params
/user/:username	/user/evan	{username:‘evan’}
/user/:usrname/post/:post_id	/user/evan/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定义名字，通过名字进行对应组件的渲染