vue vue-router学习

1vue-router中传参

params和query
如何同时使用params和query:

1. 导航组件中：
   :to="{path:‘menu/’+stuNum,query:{key:‘age’}"
   
2. 路由中：routes=[{path:‘menu/id’,component:menu},]
   path为必选项，但是组件中router-link的to所绑定的对象中的属性path不是必选项
3. menu组件中：
   打印this$route
   

2 路由守卫

beforeEach((to,from,next)) 每次跳转路由会执行
afterEach((to,from))
beforeResolve

2. 路由独享守卫

beforeEnter((to,from,next)) 跳转到当前路由才会执行
afterEnter

3.组件守卫

beforeRouteEnter

beforeRouteEnter((to,from,next)=>{
    //拿不到this，因为组件还没创建
    next((vm)=>{
        //注意vm是当前组件实例
        //该回调函数是在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。
        
    })
})

beforeRouteUpdate (2.2 新增)
复用路由组件时使用
复用：

beforeRouteUpdate()

beforeRouteLeave((to,from,next)=>{
    //next(false)
    //next({path:'',query:{}})
    //next({'/menu'})
})

beforeRouterLeave
beforeEach
beforeEnter
beforeRouterEnter
导航确认
afterEach

4流程

1. 导航被触发。
2. 在失活的组件里调用 beforeRouteLeave 守卫。
3. 调用全局的 beforeEach 守卫。
4. 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
5. 在路由配置里调用 beforeEnter。
6. 解析异步路由组件。
7. 在被激活的组件里调用 beforeRouteEnter。
8. 调用全局的 beforeResolve 守卫 (2.5+)。
9. 导航被确认。
10. 调用全局的 afterEach 钩子。
11. 触发 DOM 更新。
12. 调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。
    Q：4中 重用组件流程 4后面不执行了？
    Q: 8是什么意思

3 路由复用 route-view

复用即一个页面多个router-view，
比如home页面，同时渲染三个组件中到不同的router-view
而其他页面about页面只需要渲染到第一个router-view，
如果是component：home，只会是渲染到第一个router-view

<router-view ></router-viw>
<router-view name='a'></router-viw>
<router-view name='b'></router-viw>

routes=[
{name:'home',components:{
  default:home,
  a:compA,
  b:compB}
},]

4路由组件传参

5嵌套路由即子路由

坑：子路由对应组件不立即渲染的问题
https://blog.youkuaiyun.com/qq_38397338/article/details/90318581

<router-link tag="div" :to="{path:'/about'}"><a class="nav-link" href="#">我们</a></router-link>

父路由对应组件的router-view 如果想在这立即渲染子路由对应的组件，父路由对应的router-link中的to的方式不能通过路由的name，必须是path。子路由可以通过name来定位。

6使用滚动

滚动

const router= new vueRouter({
     routes,
     mode:'history',
     scrollBehavior(to ,from,saverPosition){
     	if(savedPosition){
     	return savedPosition}
     	
     	else 
         return {
         x:0,
         y:0
         }
   }
})

const router= new vueRouter({
     routes,
     mode:'history',
    scrollBehavior(to,from,savedPosition){
		selector:'div',
		offset:{x:10,y:10}//可选
    }
})

模拟原生浏览器行为

const router = new vueRouter({
   routes,
   mode:'history',
   scrollBehavior(to,from,saverPosition){
     if (to.hash)
     return {
     selector: to.hash,
     behavior:'smooth'//可选 
     }

   }
})