vue面试题目，router导航，路由导航，hash

3. 如何获取页面的hash变化

（1）监听$route的变化

// 监听,当路由发生变化的时候执行
watch: {
  $route: {
    handler: function(val, oldVal){
      console.log(val);
    },
    // 深度观察监听
    deep: true
  }
},

（2）window.location.hash读取#值window.location.hash 的值可读可写，读取来判断状态是否改变，写入时可以在不重载网页的前提下，添加一条历史访问记录。

# 4. $route 和$router 的区别

●$route 是“路由信息对象”，包括 path，params，hash，query，fullPath，matched，name 等路由信息参数

●$router 是“路由实例”对象包括了路由的跳转方法，钩子函数等

5. 如何定义动态路由？如何获取传过来的动态参数？

（1）param方式●配置路由格式：/router/:id●传递的方式：在path后面跟上对应的值●传递后形成的路径：/router/1231）路由定义

//在APP.vue中
<router-link :to="'/user/'+userId" replace>用户</router-link>    

//在index.js
{
   path: '/user/:userid',
   component: User,
},

2）路由跳转

// 方法1：
<router-link :to="{ name: 'users', params: { uname: wade }}">按钮</router-link

// 方法2：
this.$router.push({name:'users',params:{uname:wade}})

// 方法3：
this.$router.push('/user/' + wade)

3）参数获取通过 $route.params.userid 获取传递的值（2）query方式

●配置路由格式：/router，也就是普通配置●传递的方式：对象中使用query的key作为传递方式●传递后形成的路径：/route?id=1231）路由定义

//方式1：直接在router-link 标签上以对象的形式
<router-link :to="{path:'/profile',query:{name:'why',age:28,height:188}}">档案</router-link>

// 方式2：写成按钮以点击事件形式
<button @click='profileClick'>我的</button>    

profileClick(){
  this.$router.push({
    path: "/profile",
    query: {
        name: "kobi",
        age: "28",
        height: 198
    }
  });
}

2）跳转方法

// 方法1：
<router-link :to="{ name: 'users', query: { uname: james }}">按钮</router-link>

// 方法2：
this.$router.push({ name: 'users', query:{ uname:james }})

// 方法3：
<router-link :to="{ path: '/user', query: { uname:james }}">按钮</router-link>

// 方法4：
this.$router.push({ path: '/user', query:{ uname:james }})

// 方法5：
this.$router.push('/user?uname=' + jsmes)

3）获取参数通过$route.query获取传递的值

route是路由信息对象，包括path,params,hashquery,fullPath,matchednamd等等路由信息

参数获取$route.arams.userid获取传递的支

query方式，配置路由格式:/router,也就是普通配置，

router-link :to="(path:'/profile',query；{name:'why',age;28，height:1.88}}">

}

this.roouter.push({path:'/user'query:{name:james}});

router-link :to="{path:'/user',query:{uname:jaems}}">

afterEach跳转之后滚动会到顶部

beforeEnter如果不像全局配置收尾的话，可以维某些路由单独配置守卫

beforeRouteUpdate当前地址改变并且够组件被服用的时候触发，会

beforeRouteLeave离开组件被调用

1.完整的路由导航解析流程（不包括其他生命周期）

●触发进入其他路由。●调用要离开路由的组件守卫beforeRouteLeave●调用局前置守卫∶ beforeEach●在重用的组件里调用 beforeRouteUpdate●调用路由独享守卫 beforeEnter。●解析异步路由组件。●在将要进入的路由组件中调用 beforeRouteEnter●调用全局解析守卫 beforeResolve●导航被确认。●调用全局后置钩子的 afterEach 钩子。●触发DOM更新（mounted）。●执行beforeRouteEnter 守卫中传给 next 的回调函数

2.触发钩子的完整顺序

路由导航、keep-alive、和组件生命周期钩子结合起来的，触发顺序，假设是从a组件离开，第一次进入b组件∶●beforeRouteLeave：路由组件的组件离开路由前钩子，可取消路由离开。●beforeEach：路由全局前置守卫，可用于登录验证、全局路由loading等。●beforeEnter：路由独享守卫●beforeRouteEnter：路由组件的组件进入路由前钩子。●beforeResolve：路由全局解析守卫●afterEach：路由全局后置钩子●beforeCreate：组件生命周期，不能访问tAis。●created;组件生命周期，可以访问tAis，不能访问dom。●beforeMount：组件生命周期●deactivated：离开缓存组件a，或者触发a的beforeDestroy和destroyed组件销毁钩子。●mounted：访问/操作dom。●activated：进入缓存组件，进入a的嵌套子组件（如果有的话）。●执行beforeRouteEnter回调函数next。

3.导航行为被触发到导航完成的整个过程

导航行为被触发，此时导航未被确认。●在失活的组件里调用离开守卫 beforeRouteLeave。●调用全局的 beforeEach守卫。●在重用的组件里调用 beforeRouteUpdate 守卫(2.2+)。●在路由配置里调用 beforeEnteY。●解析异步路由组件（如果有）。●在被激活的组件里调用 beforeRouteEnter。●调用全局的 beforeResolve 守卫（2.5+），标示解析阶段完成。●导航被确认。●调用全局的 afterEach 钩子。●非重用组件，开始组件实例的生命周期：beforeCreate&created、beforeMount&mounted●触发 DOM 更新。●用创建好的实例调用 beforeRouteEnter守卫中传给 next 的回调函数。●导航完成

触发进入其他路由

调用要离开路由的组件守卫beforeRouteLeave

调用前置收尾beforeEach

在重用的组件里调用beforeRouteUpdate

调用路由独享守卫beforeEnter

beforeEach

在重用的组件里调用beforeRouteUpdate

调用路由独享守卫

beforeRouteEnter调用全局的beforeResolve守卫标志解析阶段完成

用创建好的实力调用beforeRouterEnter收尾当中传给next的回调函数

使用router跳转和使用histroy.pushStqte没有什么差别，