vue this.$router和this.$route区别解析及路由传参的2种方式 && this.$route的各种语法

// 全局注册的路由
Vue.use(VueRouter)

// 页面路由跳转 前进或者后退
this.$router.go(-1) // 后退

//push方法会向 history 栈添加一个新的记录，而replace方法是替换当前的页面，
不会向 history 栈添加一个新的记录
<router-link to="/05" replace>05</router-link>
// 一般使用replace来做404页面
this.$router.replace('/')

传参:
    const userId = '123';
    //命名的路由
    this.$router.push({name:'user', params:{userId}});  //---> /user/123
    
    ***这里的 params 不生效 (重点情况)***
    this.$router.push({path:'/user', params:{userId}});  //---> /user
    
获取参数：
this.$route.params.userId

url 形式：url 不带参数.
http:localhost:8080/#/user

传参:
<router link ：to='/gameInfo/'+uid+"/"+gameid />

//路由中：
{
path:'/gameInfo/':uid/:gameid
name:gameInfo,
component:()=>import('./views/gameInfo')
}

获取参数:
//像这样在url中传入一个参数，这个参数可以是data中的一个数据，
//也可以是一个动态的参数，在gameInfo页面接收参数的时候用params接收，比如：
this.$route.params.uid  //这里的uid是路由中：后边的参数

传参: (path 只和 query搭配, path不和params搭配)
this.$router.push({path:'/user', query:{userId: '123'}});
获取参数：
this.$route.query.userId

url形式:url中带参数.
http:localhost:8080/#/user?userId=123
获取参数:
this.$route.query.userId

传参:
<router link to='/gameInfo?uid='+uid />
获取:
this.$route.query.uid

// 路径直接写:字符串
this.$router.push('home')  // 只是跳转,不传参数
//对象
this.$router.push({path:'home'})   // // 只是跳转,不传参数

router.beforeEach((to, from, next) => {
  // to 和 from 都是 路由信息对象
})

watch: {
  $route(to, from) {
     // to 和 from 都是 路由信息对象
  }
}

  <router-link
     class="icon-go"
     :to="{ name: '首页'}"
     v-if="$route.matched[0].path=='/category'">
    </router-link>
    <span class="icon-go" @click="$router.go(-1)" v-else></span>
    <slot name="title"></slot>

const router = new VueRouter({
  routes: [
    // 下面的对象就是路由记录
    { path: '/foo', 
    component: Foo,
    children: [
        // 这也是个路由记录
        { path: 'bar', 
        component: Bar }
      ]
    }
  ]
})

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      children: [
        {
          path: 'bar',
          component: Bar,
          // a meta field
          meta: { requiresAuth: true ,keepAlive:true}//1.权限 2.内存缓存，单页面切换
        }
      ]
    }
  ]
})

    //一级路由 
    {
      path: '/foo',
      component: Foo,
      children: [
        {
          path: 'bar',
          component: Bar,
          // a meta field
          meta: { requiresAuth: true ,keepAlive:true}//1.权限 2.内存缓存，单页面切换
        }
      ]
    }
 
 
//一级路由的子路由
    { path: 'bar',component: Bar,meta: { requiresAuth: true ,keepAlive:true } }
 
//两者都是    路由记录

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // this route requires auth, check if logged in
    // if not, redirect to login page.
    if (!auth.loggedIn()) {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  } else {
    next() // 确保一定要调用 next()
  }
})