Vue-Router

1. 重定向页面

const router = new VueRouter({
    routers:[
       1、 {path:'/a',redirect:'/b'}
       2、 {path:'/a',redirect:{name:'foo'}}
    ]
})
这是两种方式

2.路由导航守卫和Vue实例生命周期钩子函数的执行顺序

答案：路由导航守卫都是在Vue实例生命周期钩子函数之前执行的

3.切换路由后，新页面要滚动到顶部或者保持原先的滚动位置如何设置

const router = new Router({
    mode: 'history',
    base:process.env.BASE_URL,
    routers,
    scrollBehavior(to,from.savePosition){
        if(savedPosition){
            return savedPosition;
        } else {
            return { x:0,y:0};
        }
    }
})

4、路由对象属性

1、 $route.path
    类型:string
    字符串，对应当前路由的路径 ，总是解析为绝对路径，如"/allPage/mypage"

2、 $route.params
    类型:object
    一个key/value对象，包含动态片段和全匹配片段，如果没有路由参数，就是一个空对象

3、$route.query
    类型:object
    一个key/value对象，表示URL查询参数，如果没有查询参数，则是一个空对象

4、$route.fullPath
    类型:string
    完成解析后的URL,包含查询参数和hash的完整路径

5、$route.name
    当前路由的名称，如果有的话

以上是路由route较为常用的属性，在实例中可自行查看全部属性值

5、Vue Router 的一个博客地址

https://router.vuejs.org/zh/guide/advanced/scroll-behavior.html

6、路由之间的跳转方式

        1、声明式 通过使用内置组件<router-link :to="/home">来跳转

         2、编程式 通过调用router实例的push方法router.push({path:"/home"}) 或者

                replace方法 router.replace({path:'/home'})

7、当vue-router 使用history模式，部署时要注意什么？

        ·要注意404的问题，因为在history模式下，只是动态的通过js操作window.history来改变浏览器地址里的路径，并没有发起http请求，所以当直接在浏览器里输入这个地址的时候，就会对服务器发起请求，但是这个目标在服务器上又不存在，所以会返回404.

        所以要在Nginx中将所有请求都转发到index.html上就OK啦

8、route和router有什么区别？

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

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

9、路由跳转打开新窗口示例

const obj = {
    path:xxx,//路由地址
    query:{
        mid:data.id
    }
};
const {href} = this.$router.resolve(obj);
window.open(href,'_blank')

10、Vue router 除了 router-link 怎么实现跳转？

        router.go(-1);

        router.push('/')

11、Vue router 跳转和 location.href 区别？

        router 是hash改变

        location.href 是页面跳转，刷新页面

 12、路由懒加载方式

使用() => import()   如下：

const ComponentA = () => import('./ComponentA')
const ComponentB = () => impont('./ComponentB')

 使用resolve => require(['./ComponentA'],resolve)

const ComponentA = resolve => require(['./ComponentA'],resolve)