vue-router,vue路由,vue路由设置

路由配置:

{
  path:'/',
  name:'home',
  component:Home,
  redirect:'/home'  //路由重定向
}
{
  path:'/learn',
  name:'learn',
  component:()=>import('./views/Student')  //路由懒加载，即没有切换到该路径时不加载
}
{
  path:'/play',
  name:'play',
  component:()=>import('./views/Play'),
    children:[{
       {
         path:'wangzhe',  //简写路径，等同于 '/play/wangzhe'
         name:'wangzhe',
         component:()=>import('./views/WangZhe'),
       },
       {
         path:'chiji',
         name:'chiji',
         component:()=>import('./views/ChiJi'),
       }
    }]
}
{
  path:'/NotFound',
  component:()=>import('./views/NotFound')
}
{
  path:'*',
  redirect(to){   // 不包含以上路径时，重定向路径函数写法
    if(to.path == '/'){
     return './home'
    }else{
      return './NotFound'
    }
  }
}

路由跳转的几种方式：

1.标签内跳转

<router-link tag="li" to="/student">我的</router-link>
<router-link tag="li" :to="{path:'./my'}">我的</router-link>
<router-link tag="li" :to="{name:'my'}">我的</router-link>

2.点击事件跳转

<router-link tag="li" @click="tz">我的</router-link>
tz(){
    this.$router.push('./my')  
    //或者 this.$router.replace('./my')
    
    //或者  this.$router.go(-1)  从当前页面回退一个页面，即类似返回按钮
}

路由元信息

作用：用来存储路由信息
meta:{}
eg:

{
  path:'/learn',
  name:'learn',
  component:()=>import('./views/Student')  //路由懒加载，即没有切换到该路径时不加载
  meta:{
  login:true  //meta对象里的数据可以任意，但要有一定含义。这里可以理解为。learn这个路由，需要登陆才能进入
  }
}
 
router.beforeEach(to,from ,next) => {
  if(to.name = 'learn'){
    if(to.meta.login){
     next();
     return;
    }
    window.confirm('要去登陆吗？')
    if(confirm){
     next('./login')
    }
  } 
  next();
}

当前路由信息：
this.$route

监听路由跳转信息：

watch: {
    $route(to,from){
       console.log(to,from)                                
    }
}