什么是前端路由?
路由是根据不同url地址展示不同的内容或页面
前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做,之前是通过服务端根据url的不同返回不同的页面实现的
什么时候使用前端路由?
在单页面应用,大部分页面结构不变,只改变部分内容时使用
前端路由有什么优点和缺点?
优点:用户体验好,不需要每次都从服务器全部获取,快速展现给用户
缺点:1,不利于seo;2,,使用浏览器的前进、后退键的时候会重新发送请求,没有合理地利用缓存; 3,单页面无法记住之前滚动的位置,无法在前进,后退的时候记住滚动的位置
常用
- Vue-router用来构建SPA
<router-link></router-link>或者this.$router.push({path:''})
<router-view></router-view>
- vue-router 实际上是对history的封装
路由的使用
动态路由:
模式 | 匹配路劲 | $route.params |
---|---|---|
/user/:username | /user/evan | {username:‘evan’} |
/user/:username/post/:post_is | /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定义名字,通过名字进行对应组件的渲染