路由属性
路由传参
- 两种导航传参方式,传递查询字符串参数。
<router-link to="/detail?a=1&b=2&id=1122">小米10</router-link>
<script>
goToDetail(){
this.$router.push({ path:'/detail', query:{ a:22,b:33 } } ) //对象形式
this.$router.push('/detail/a=11&b=33') //路径形式
}
</script>
- 接收页面使用 $route.query接收
this.$route.query
动态路由
- 修改路由配置
{ path:'/list/:type/:name',component:list }//冒号后为变量
<!--页面跳转方式 -->
<router-link to="/list/2/手机">列表页-手机</router-link>
<router-link to="/list/5/沙发">列表页-沙发</router-link>
<script>
goToList(type,name){
this.$router.push( `/list/${type}/${name}` )
}
</script>
- 接收页面使用 $route.params接收动态路由。
this.$route.params
命名路由 (name)
- 修改router/index.js中的路由配置
{
path:'/detail',
component:detail,
name:'detail'
}
<!--页面跳转方式 -->
<router-link :to="{ name:'detail',params:{ type:8,name:'上衣' }}">列表页-上衣</router-link>
<script>
goToList(type,name){
this.$router.push( { name:'detail',params:{ type:type,name:name } }
}
</script>
命名视图-了解
一般情况下,component为当组件页面时,会在路由出口中渲染,但想渲染多个页面组件到一个页面时需要components:{}.
- 当匹配到 /login路由时,那么 login组件会渲染到默认的出口,而order组件渲染到名称为aa的路由出口,即两个页面组件。
{
path:'/login',
components:{
default:login,
aa:order
}
}
<!-- 路由出口 :默认定义名称就是默认default -->
<router-view></router-view>
<router-view name="aa"></router-view>
路由元信息 (meta)
- 修改路由配置
{
path:'my',
component:my,
meta:{
title:'个人中心'
}
},
{
path:'cates',
component:cates,
meta:{
title:'分类'
}
}
- 获取元素信息
this.$route.meta
懒加载
我们vue是单页面应用,首屏加载可能会很慢,因为第一次打开,会加载所有的资源所以很慢。解决懒加载。
- 不直接引入页面组件。
let a = () => import("../pages/a/a.vue")
let b=()=>Promise.resolve(import("../pages/b/b.vue"))
{ path:'a',component:a}
//或
{ path:'a',component:() => import("../pages/a/a.vue")}
导航守卫
全局守卫
全局守卫:全局路由设置
router.beforeEach((to,from,next)=>{}) //所有路由进来之前 登录拦截
router.afterEach((to,from)=>{}) //所有路由进来之后 : 了解
//需求:只有登录才能访问,未登录则跳转到/login
// 所有路由进来之前 登录拦截 以及后台系统就会在这里判断是否登录
router.beforeEach( (to,from,next)=>{
//to : 你想到哪,你想访问哪个路径
//from : 来自于哪
//next() 放行
if( to.path == '/login' ){ //如果访问login,则直接放行
next()
}
if( localStorage.getItem('username') ){ //有值代表登录了。
next()
}
} )
router.afterEach((to,from)=>{//所有路由进来之后 : 了解
console.log( 'afterEach' )
})
路由独享守卫
路由独享守卫:每个路由里面设置。
beforeEnter(to,from,next){} //守卫path
{
path: '/list/:type/:name',
component: list,
name: 'aaa',
//假设只除0 角色外的人才能进
beforeEnter(to, from, next) {
if( localStorage.getItem('membertype') != '0' ){
next()
}else{
alert('请充值')
}
}
},
组件守卫
组件内部守卫:每个组件里面设置。
-
beforeRouteEnter(to,from,next){} 路由进来之后,组件实例创建之前。无实例this.,通过next回调拿到实例this.
-
beforeRouteUpdate(to,from,next){} 路由更新之后,组件实例创建之前。
-
beforeRouteLeave(to,from,next){} 路由离开之前 : 了解
-
beforeRouteEnter 创建之前
beforeRouteEnter(to, from, next) {
//路由进来之前
//console.log('进来之前',this) //页面组件还未创建,比beforeCreate还早
//根据用户的角色,展示不同的价格
next((vm) => {
console.log(vm, "在这里可以访问到this实例");
vm.membertype = localStorage.getItem("membertype");
});
}
- beforeRouteUpdate 路由更新
<h2>猜你喜欢</h2>
<router-link to="/list/2/手机">列表页-手机</router-link> |
<router-link to="/list/9/电脑">列表页-电脑</router-link> |
beforeRouteUpdate(to,from,next){ //路由更新之前
console.log('路由更新了')
console.log( to.params,'在这里重新发送ajax' ) //因为这里是动态路由,都是list因此组件不会重新创建,所以只能每次路由更新后重新发送ajax请求,就在这里发送。
next()
}
滚动处理
const router = new VueRouter({
//滚动处理
scrollBehavior(to,from,savePosition){
//如果保存了位置,就返回保存的地方;否则,返回到(0,0)
if(savePosition){
return savePosition
}else{
return {x:0,y:0 }
}
}
})