Vue路由的一些知识点

总结几个有关路由的知识点

$router和$route的关系

$route为当前router跳转对象里面可以获取name、path、query、params等

$router为VueRouter实例，想要导航到不同URL，则使用$router.push方法等

<router-link>中的to 和 :to 的区别

to是指直接跳转页面 <router-link to="aa>go</router-link">

:to是指跳转时候传参<router-link :to="{path:'tt',query:{'cc':'cc'}}">go </router-link>

跳转时候传参

一种是name的方式 一种是path的方式

方式一 path方式 参数放在query里面

  // 当前是a页面 想传值到 b页面
  <template>
      <div class="me">
          <router-link :to="{path:'go',query:{'cc':'this is cc'}}">
              go 
          </router-link>
      </div>
  </template>
  <script>
      export default{
      
      }
  </script>
  <style scoped lang="less">
      
  </style>
  ​
  // 路由配置页面
  import Vue from 'vue'
  import Router from 'vue-router'
  Vue.use(Router)
  ​
  import BB from '../components/bb/bb.vue'
  ​
  Vue.use(Router)
  ​
  export default new Router({
      routes: [
          {
              path:'/go',
              // name:'tt',
              component:BB
          }
      ]
  })
  ​
  // b页面
  <template>
      <div class="test">
          {{$route.query.cc}} // this is cc
      </div>
  </template>
  <script>
      export default {
  ​
      }
  </script>
  <style scoped lang="less">
      
  </style>

方式二 name方式 参数放在params里面

  // 当前是a页面 想传值到 b页面
  <template>
      <div class="me">
          <router-link :to="{name:'go',params:{'cc':'this is cc'}}">
              go 
          </router-link>
      </div>
  </template>
  <script>
      export default{
      
      }
  </script>
  <style scoped lang="less">
      
  </style>
  ​
  // 路由配置页面
  import Vue from 'vue'
  import Router from 'vue-router'
  Vue.use(Router)
  ​
  import BB from '../components/bb/bb.vue'
  ​
  Vue.use(Router)
  ​
  export default new Router({
      routes: [
          {
              path:'',
              name:'go',
              component:BB
          }
      ]
  })
  ​
  // b页面
  <template>
      <div class="test">
          {{$route.params.cc}} // this is cc
      </div>
  </template>
  <script>
      export default {
  ​
      }
  </script>
  <style scoped lang="less">
      
  </style>