vue：基础：路由

1、vue 导航守卫是做什么的？

（1）做什么的

        用来跳转或者取消的方式守卫导航。

（2）适用场景

登录时跳转和权限设置
监听用户是否刷新，用户刷新后你想做的操作
导航路由可以做拦截

（3）全局导航守卫的方法

to：将要访问的路
next：是一个函数，调用next() 表放行，允许这次路由通行
from：将要离开路由

（4）导航钩子分类【3种】

全局守卫：beforeEach、beforeResolve、afterEach

组件守卫：beforeRouterLeave、beforeRouterUpdate、beforeRouterEnter

路由守位：beforeEnter

（5）导航钩子流程

导航被触发

    beforeRouterLeave【在失活的组件里调用】

    beforeEach 【 调用全局的】

    beforeRouterUpdate 【在重用的组件调用】

    beforeEnter 【在路由配置里面】 解析异步路由组件

    beforeRouterEnter【在被激活的组件里调用】

    beforeResolve【调用全局的】

导航被确认

    afterEach【调用全局的】

触发 DOM 更新

    调用 beforeRouterEnter 守卫中传给next的回调函数，创建好的组件实例会作为回调函数的参数传入。

2、router 和 route 有什么区别？

（1）router【方法】 : 是路由对象实例，相当于一个全局路由对象。

this.$router.push('地址'）【跳转地址】
this.$router.back() / this.$router.go(-1)【后退】
this.$router.forward() / this.$router.go(1)【前进】

（2）route【对象】：是路由信息对象,里面包含: path、name、hash、params、fullPath、matched。

        指的正在跳转的对像，可以从里面获取 name、path 等。

3、vue-route 有几种模式？【3种】

（1）hash : 默认模式，localhost//8080/#，有 #号。

（2）history : 参考 html5 中的 History API。

（3）Abstract ：不咋使用。

4、hash 和 history 有什么区别？

        表层理解：hash 比 history 多一个 #。

        深层理解：history 在 html5 中 新增加了 pushState 和 replaceState。新增了对历史记录修改，修改后url ，不会立马向后端发送请求。缺点是：在访问二级页面时刷新页面，会出现 404报错，需要后端在nginx 中重新定向一个 url。

5、fullpath 和 path 有什么区别？

​
例如：一个地址：http://xxx/#/console/orderManage/editOrder?id=111xxx

fullpath 是带参数。例如：/console/orderManage/editOrder?id=111xxx

path 是不带参数。例如：/console/orderManage/editOrder

​

6、如何去除路由中的 #

mode: 'history'

7、路由怎么跳转

<route-link to='/home'>首页</route-link>

8、动态路由是什么？

        一般情况我们菜单都是走路由，配置菜单。

const router = new VueRouter({
    routes[{
        path: '/user/:id'  // 动态路径参数 以冒号开头 
    }]
})

9、组件复用导致路由参数失败怎么办？【2种】

        1、用 watch 监听。

        2、router-view 中加 :key 阻止复用。

方法一：
    watch: {
        'router': function() {
            this.getData(this.router.params.xxxx)    
        }
    }

方法2：
    <router-view :key="route.fullPath"></router-view>

10、vue 使用 watch 监听路由变化【3种】

方法一：
watch: {
    'router': {
        handler: function(val, oldVal) {
            console.log(val)        
        },
        deep: true, // // 深度观察监听
    }
}
方法二：
watch: {
    $route(to, from) {
        console.log(to.path)
    }
}
方法三：
watch: {
    'route':'getDemo'
},
methods: {
    getDemo() {
        console.log(this.$route.path)    
    }
}