Vue的路由设置
一、路由基础介绍
1、什么是前端路由?
路由是根据不同的url地址展示不同的内容或页面
前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做,之前是通过服务器根据url的不同返回不同的页面实现的(只更新页面的某一部分,而不是整体重新加载了)
2、什么时候使用前端路由?
在单页面应用,大部分页面结构不变,只改变部分内容的使用
3、优缺点
优点:
用户体验好,不需要每次都从服务器全部获取,快速展现给用户
缺点:
不利于SEO
使用浏览器的前进、后退键的时候会重新发送请求,没有合理地利用缓存
单页面无法记住之前滚动的位置,无法再前进、后退的时候记住滚动的位置
二、vue路由
vue-router用了构建SPA
<router-link></router-link>或者this.$router.push({path:''}) 跳转标签
<router-view></router-view>
三、动态路由匹配
什么是动态路由
四、嵌套路由
什么是嵌套路由
五、编程式路由
通过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定义名字,通过名字进行对应组件的渲染