VueRouter进阶

1.动态路由

Vue项目中，多个页面之间进行切换时，可以复用一个组件，如多次浏览不同的商品，可以重复使用一个商品详情组件，VueRouter提供了动态路由的模式重用一个组件，避免多次组件加载导致的资源浪费

<router-link to='/goods/100'>查看商品100</router-link>
<router-link to='/goods/200'>查看商品200</router-link>

...
{path:'/good/:gid',component:GoodsDetail}
...

接收数据

<p>当前展示的商品编号为{{$route.params.gid}}</p>

2.路由参数

路由之间的参数，都是Get请求格式的参数（路由跳转都是通过页面超链接导航发生的跳转），所以理由之间的参数传递主要有两种方式

1.RESTful风格参数

耦合方式传递参数

<router-link to='/goods/100'>查看商品100</router-link>
<router-link to='/goods/200'>查看商品200</router-link>

{
	{path:'/good/:gid',component:GoodsDetail}
}

<p>当前展示的商品编号为{{$route.params.gid}}</p>

解耦合方式

<router-link to='/goods/100'>查看商品100</router-link>
<router-link to='/goods/200'>查看商品200</router-link>

{
	{path:'/good/:gid',component:GoodsDetail,props:true}
}

<p>当前展示的商品编号为{{gid}}</p>
<script>
...
props:['gid']
...
</script>

2.GET查询字符串参数

耦合方式

<router-link to='/goods?id=100'>查看商品100</router-link>
<router-link to='/goods?id=200'>查看商品200</router-link>

{
	{path:'/good',component:GoodsDetail}
}

<p>当前展示的商品编号为{{route.query.id}}</p>

解耦合方式

<router-link to='/goods?id=100'>查看商品100</router-link>
<router-link to='/goods?id=200'>查看商品200</router-link>

{
	{path:'/good',component:GoodsDetail,props:(route)=>({id:route.query.id})}
}

<p>当前展示的商品编号为{{id}}</p>
<script>
...
props:['id']
...
</script>

3.路由导航守卫

一个路由组件要展示出来，从导航链接被点击开始，项目就开始根据导航链接分派导航组件，知道导航被确认，然后被加载渲染之后才会正确显示，最终再切换到其他组件时离开当前导航组件，这个过程中会经历以下守卫

全局前置守卫：所有的导航链接呗确认之前就会执行：beforeEach（），可以拦截页面跳转
全局解析守卫：当目标导航链接被确认并解析之后执行：beforeResolve(),可以拦截页面跳转
全局后置钩子：目标导航组件已经被渲染结束后执行：afterEach（），不可以拦截页面跳转
路由独享守卫：在路由规则上添加，拦截该路由上的所有请求：beforeEnter()，可以拦截页面跳转
组件内前置守卫：组件内部已经加载时执行的守卫：beforeRouterEnter()
组件内更新守卫:组件内部数据更新时执行的守卫：beforeRouteUptate()
组件内离去守卫：组件在发生切换时，离开组件时执行的守卫：beforeRouterLeave()