router学习
js小问题
expoert default可用于导出常量等等,仅能用一次。
起步
- 来导航
- to属性指定链接
- router-link 被渲染成 标签
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
- 路由出口 ,路由匹配到组件将渲染在此
定义
- 定义组件
const Foo={template:'<div>这是一个组件</div>'}
- 定义路由
const routes=[
{path:'/foo',component:Foo}
]
- 创建和挂载根实例,注入路由器
const app=new Vue({
router
}).$mount('#app')
- 诸如完毕,可以通过
this.$router
来进行访问。
动态路由匹配
- path:’/user/:id’ 以冒号开头,会设置到
this.$route.params
中 - $route 还提供了其它有用的信息,例如 r o u t e . q u e r y ( 如 果 u r l 中 有 查 询 参 数 ) 、 route.query(如果url中有查询参数)、 route.query(如果url中有查询参数)、route.hash等等。
- 组件复用问题:动态路由时出现,可以通过
watch:{ '$route'(to,from){...} }
进行处理,或者引入beforeRouteUpdate(守卫导航)
通配符 AND 404
path:'*'
匹配所有(通常用于404错误)
path:'/user-*'
所有以/user开头的路径
使用this.$router.params.pathMatch
来显示。
高级匹配
vue-router支持很多高级匹配
匹配优先级
同一个路由可以匹配多个路由,优先级按照路由定义顺序。
嵌套路由
/user/foo/profile ----> /user/foo/posts
User User
Profile ---------------------> Posts
const User = { template: '<div>...</div>' }
const router = new VueRouter({
routes:[
{ path: ' /user/:id',
component: User,
children: [
{path:'profile',...},
{path:'posts',...}
]
}
]
})
可以设置children中 path: ’ ’ 可以提供空的子路由进行渲染。
编程式的导航
- 创建a标签来定义导航链接。声明式
- router.push(…)导航到不同url(向history栈添加新的记录)。编程式
参数类型 | 形式 | 描述 |
---|---|---|
字符串 | ||
对象 | {path:‘home’} | |
命名路由 | {name:‘user’ , params:{…}} | 若提供path,则不需params |
带查询参数 | {path:’…’ , query:{…:…}} |
push和replace
参数 | 描述 |
---|---|
onComplete | 完成时候调用 |
onAbort | 终止时候调用 |
注意
- 目的地与当前路由相同,使用beforeRouteUpdate来响应。
- replace替换当前history记录。
router.go(n)
意思是向前或者向后退步。
操作History
router.push=window.history.pushState
router.replace=window.history.replaceState
router.go =window.history.go
命名路由
链接到命名路由
<router-link :to="{name:'user',params:{userId:123}}">User</router-link>
上面这段等于
router.push({name:'user',params:{userId:123}})
命名视图
同级展示多个视图(非嵌套)
<router-view class="aaa"></...>
<router-view class="bbb" name="b"></...>
<router-view class="ccc" name="c"></...>
多个视图就需要多个组件
const router=new VueRouter({
routes:[
{
path:'/',
components:{
default:Foo,
b:Bar,
c:Baz
}
}
]
})
嵌套命名视图
{
path:"/settings",
component:Test,
children:[{
path:'email',
component:TestEmail
},{
path:'profile',
components:{
default:TestProfile,
helper:TestPreview
}
}]
}
<div>
<span>setting</span>
<router-view></router-view>
<router-view name="helper"/>
</div>
重定向
routes:[
{path:'/a',redirect:'/b'}
]
访问/a就回到/b。
redirect: to =>{...}
作为方法,接受目标路由作为参数。返回重定向路径。
路由组件传参
解除耦合:
const User={
props:['id'],
template:'.......'
}
并且在Vuerouter中设置组件得props为true。
函数模式
props也可以设置函数模式。
{ path:'/..',component:...,props: (route) => (query: route.query.q) }
从而响应/..?q=vue
会将{query:'vue'}
传输。
前端路由模式
hash模式
使用url hash值来作路由,支持所有浏览器。
url改变,页面不会重新加载。
http://www.abc.com/#/hello ,hash值为 #/hello。hash不会在请求之中,对后端无影响,因此改变hash不会重新加载页面。
缺点是加上#后不太美观。
history模式
依赖html5 history api 和 服务器配置。充分利用history.pushState,跳转而无需重新加载。
abstract模式
支持js环境
符号
#是vue-router使用的hash符号
#!是angularjs使用的hash符号
导航守卫
跳转或取消的方式守卫导航。
全局前置守卫
router.beforeEach(
(to,from,next)=>{ ... }
)
- to 目标
- from 准备离开
- next 来resolve这个钩子,执行依赖next方法。next()进行管道下一个;next(false) 中断;next(’/’)跳转到下一个不同地址。
全局解析守卫
所有组件被解析后调用
全局后置钩子
router.afterEach
组件内部守卫
- beforeRouteEnter
- beforeRouteUpdate
- beforeRouteLeave
完整导航解析流程
- 导航被触发。
- 在失活的组件里调用离开守卫。
- 调用全局的 beforeEach 守卫。
- 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
- 在路由配置里调用 beforeEnter。
- 解析异步路由组件。
- 在被激活的组件里调用 beforeRouteEnter。
- 调用全局的 beforeResolve 守卫 (2.5+)。
- 导航被确认。
- 调用全局的 afterEach 钩子。
- 触发 DOM 更新。
- 用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。
路由元信息
在路由中这样设置
以后就可以在$route中查找到对应的元信息。
数据获取
导航后获取
在组件生命周期钩子获取。(获取其间显示‘加载’)。
导航前获取
守卫中获取数据。