Vue 路由

1 定义路由

//引入VueRouter
import VueRouter from 'vue-router'
//引入Luyou 组件
import About from '../components/About'
import Home from '../components/Home'

//创建router实例对象，去管理一组一组的路由规则
const router = new VueRouter({
	routes:[
		{
			path:'/about',
			component:About
		},
		{
			path:'/home',
			component:Home
			children:[ //通过children配置子级路由
			{
				path:'news', //此处一定不要写：/news
				component:News
			}]
		},
		{
			name:'xiangqing'//简化path
			path:'/home/message/detail',
			component:Detail
		}					 
	]
})

//暴露router
export default router

指定展示位置

<router-view></router-view>

2 路由跳转

1. 通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。
2. 每个组件都有自己的$route属性，里面存储着自己的路由信息。
3. 整个应用只有一个router，可以通过组件的$router属性获取到。

2.1 router-link

<router-link to="/home/news">News</router-link>
//to = "路由的path"

2.2 路由跳转可以携带参数query params

qurey参数

传递参数:
<!-- 跳转并携带query参数，to的字符串写法 -->
<router-link :to="/home/message/detail?id=666&title=你好">跳转</router-link>
				
<!-- 跳转并携带query参数，to的对象写法 -->
<router-link 
	:to="{
		path:'/home/message/detail',
		query:{
		   id:666,
            title:'你好'
		}
	}"
>跳转</router-link>


接收参数：
$route.query.id 
$route.query.title

params参数

路由配置:
{
	name:'xiangqing',
	path:'detail/:id/:title', //使用占位符声明接收params参数
	component:Detail
}


传递参数:
<!-- 跳转并携带params参数，to的字符串写法 -->
<router-link :to="/home/message/detail/666/你好">跳转</router-link>
				
<!-- 跳转并携带params参数，to的对象写法 -->
<router-link 
	:to="{
		name:'xiangqing',  //不能写成path:detail/:id/:title的形式,必须要name
		params:{
			id:666,
			title:'你好'
		}
	}"
>跳转</router-link>


接受参数:
$route.params.id 
$route.params.title

2.3 编程式路由导航

query
this.$router.push({name:'home',query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})
 
params
this.$router.push({name:'home',params: {id:'1'}})  // 只能用 name

3 路由接收

<router-view></router-view>

路由跳转<router-link>(或this.$router.push)与<router-view>在同一个vue里
vue是单页面应用,所有页面都在app.vue里
在app.vue里有<router-link><router-view>可以接受home组件
在home.vue里又有<router-link><router-view>

虽然叫路由跳转,在地址栏url也变化了,但其实没有跳到其他页面.
路由跳转是沿用以前多页面的叫法,在单页面应用中,其实是将其他页面加载到当前页面中,或者叫路由引用更为合适.

4 路由守卫

//全局前置守卫：初始化时执行、每次路由切换前执行
router.beforeEach((to,from,next)=>{
	console.log('beforeEach',to,from)
	if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
		if(localStorage.getItem('school') === 'atguigu'){ //权限控制的具体规则
			next() //放行
		}else{
			alert('暂无权限查看')
			// next({name:'guanyu'})
		}
	}else{
		next() //放行
	}
})

//全局后置守卫：初始化时执行、每次路由切换后执行
router.afterEach((to,from)=>{
	console.log('afterEach',to,from)
	if(to.meta.title){ 
		document.title = to.meta.title //修改网页的title
	}else{
		document.title = 'vue_test'
	}
})

//路由独享守卫
{
	path:'/about',
	component:About,

	beforeEnter(to,from,next){
		console.log('beforeEnter',to,from)
		if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
			if(localStorage.getItem('school') === 'atguigu'){
				next()
			}else{
				alert('暂无权限查看')
				// next({name:'guanyu'})
			}
		}else{
			next()
		}
	}

}

//组件内守卫, 写在vue里
<script>
export default {
    data(){
        return{
            name:"Arya"
        }
    },
    beforeRouteEnter:(to,from,next)=>{
        next(vm=>{
            alert("hello" + vm.name);
        })
    }
}
</script>