router-link
:to
require
字符串 name/path
对象 path & params
replace 不会在histroy 添加历史
tag 可以配置标签
append 在当前路由后添加路径
active-class
router-link-active
exact 精准匹配
router-link-exact-active
router-view 组件是一个 functional 组件,渲染路径匹配到的视图组件
props 设置了名称,回对应渲染对应路由配置下的相应组件
命名视图 你可以在界面中拥有多个单独命名的视图,而不是只有一个单独的出口
视图嵌套
Router
routers: [],
mode: hash/histroy/abstract
hash 支持所有浏览器
histroy H5 histroy 模式
abstract 支持所有的 javascript 运行环境
base
scrollBehavior 滚动行为
router 的实例
方法 和 对象
beforeEach
beforeResolve
afterEach
push/replace/go/back/forward
router.push({
name: ‘user’,
params: {
userid: 1213
},
query: ‘’
})
router.push({
path: ‘user/‘+userid,
query: {}
},
onComplate () {
},
onAbort () {
})
name 和 path 的区别
name + param => path
导航守卫守卫对象是目标路由
全局/单个路由独享/组件
参数查询的改变不会触发导航守卫
hash 模式路由地址会带 # ,但是浏览器发送给服务器端是# 之前的URL
hash 模式的好处是,虽然是单页面,可以刷新当前页面
histroy 需要服务器端配合,如果服务端配置仅仅是找不到路由,就重定向到index.html 刷新会跳首页,如果服务端对于匹配不到的url 不做配置,会返回 404
构建SPA 需要引入前端路由系统,着就是 vue-router 存在的意义。前端路由的核心,就在于——改变视图的同时不会向后端发出请求。
hash —— url 中的 #
http://www.abc.com/#/hello hash 的值为 #/hello 。
hash 虽然出现在 url 中,但是不会被包含在http 请求中,对后端完全没有影戏那个,因此改变 hash 不会重新加载页面。
history —— 利用了 HTML5 history Interface 中新增的 pushState() 和 replaceState() 方法
这两个方法应用于浏览器的历史记录栈,在当前已有的 back、forword、go 的基础之上,他们提供了对历史记录修改的功能。修改的时候,改变了 url,但是浏览器不会立即向后端发送请求。
hash 模式下,仅 hash 符号之前的内容会被包含在请求中。因此没有坐到对路由的全覆盖,也不会返回 404
histroy 模式下,前端的url 必须和实际向后端发起的URL一致
如:http://xxx/user/id
如果缺少‘user/id’的路由出力,将返回404
此种模式 需要在服务端增加一个覆盖所有情况的候选资源,如果url 匹配不到任何静态资源,则应该返回同一个 index.html 页面