-
重定向页面
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)