vue(10):路由补充

路由props传参（了解）

布尔模式
实例：

<div id="app">
	<router-link to="/login/10/'哈哈哈'">登录</router-link>
	<router-link to="/register">注册</router-link>
	<router-view></router-view>
</div>
<script type="text/javascript">
	//定义路由模板
	var login = {
		props:['id','name'],
		template:'<h3>登录页面--{{id}}--{{name}}</h3>'
	}
	var register = {
		template:'<h3>注册页面</h3>'
	}
	//定义路由
	var router=new VueRouter({
		routes : [
			{path:'/login/:id/:name',component:login,props:true},
			{path:'/register',component:register},
			{path:'*',redirect:'/login'} //重定向，当路径错误是跳转到指定页面
		]
	})
	//关联路由
	new Vue({
		el:'#app',
		router:router
	})
</script>

如果 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表示后退一页

实例： 跳转与后退

<div id="app">
	<router-link to="/user">用户</router-link>
	<router-link to="/register">注册</router-link>
	<router-view></router-view>
</div>
<script type="text/javascript">
	var user = {
		template: `
		<div>
			<h1>用户</h1>
			<button @click="goRegister">跳转到注册页面</button>
		</div>
		`,
		methods: {
			goRegister() {
				//this.$router.push('/register')
				//或，，必须要有name属性
				this.$router.push({
					name: 'register'
				})
			}
		}
	}
	var register = {
		template: `
		<div>
			<h1>注册</h1>
			<button @click="goBack">后退</button>
		</div>
		`,
		methods: {
			goBack() {

				this.$router.go(-1)
			}
		}
	}
	var router = new VueRouter({
		routes: [{
			path: '/user',
			component: user
		}, {
			path: '/register',
			name: 'register',
			component: register
		}]
	})
	new Vue({
		el: '#app',
		data: {

		},
		router: router
	})
</script>

push的其它用法

// 字符串
router.push('home')

// 对象
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})

// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

注意：如果提供了 path，params 会被忽略，上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法，你需要提供路由的 name 或手写完整的带有参数的 path：

const userId = '123'
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.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