本文共 1679 字，大约阅读时间需要 5 分钟。

路由props传参（了解）

布尔模式

   
	
    
     登录
    	
    
     注册
    	
    
   

如果 props 被设置为 true，route.params 将会被设置为组件属性。这样可以更加灵活的使用路由参时，但是这只适用于params传参方式

其它用法

编程式导航

• 声明式导航：通过点击链接实现导航方式，叫做声明式导航
  例如：普通网页中的<a></a>链接或vue中的<router-link></router-link>
• 编程式导航：通过调用JavaScript形式的API实现导航的方式，叫做编程式导航
  例如：普通网页中的location.href

这里这介绍一下vue中的编程式导航

常用API：

• this.$router.push('hash地址')
  功能：用来实现页面的跳转
• this.$router.go(n)
  功能：实现页面的前进和后退，例如-1表示后退一页

实例： 跳转与后退

   
	
    
     用户
    	
    
     注册
    	
    
   

push的其它用法

// 字符串router.push('home')// 对象router.push({    path: 'home' })// 命名的路由router.push({    name: 'user', params: {    userId: '123' }})// 带查询参数，变成 /register?plan=privaterouter.push({    path: 'register', query: {    plan: 'private' }})

const userId = '123'router.push({    name: 'user', params: {    userId }}) // -> /user/123router.push({    path: `/user/${   userId}` }) // -> /user/123// 这里的 params 不生效router.push({    path: '/user', params: {    userId }}) // -> /user

路由导航守卫

作用

官方教程：

我这里用到的是全局前置守卫beforEach，就简单了解了一下

• to：即将要进入的目标路由对象
• from：当前导航正要离开的路由
• next：执行下一步next()表示放行,next(地址)表示强制跳转

实例： 如果用户没有登录不能访问特定页面，跳转到登录界面

var router= new Router({     routes: [	 {   path:'/',redirect:'/login'},     {   path:'/login',component:login},	 {   path:'/home',component:Home}  ]})//设置路由导航router.beforeEach((to,from,next)=>{   	//如果访问登录页面直接放行	if(to.path==='/login') return next()	//从sessionStorage获取qqusername判断是否以登录，如果没有登录跳转到登录页	var qname=window.sessionStorage.getItem('qqusername')	if(!qname) {   		return next('/login')	}	//已经登录直接方向	return next()})export default router