Vue Router

Vue Router

前端 中的路由

Vue Router中文文檔

路由的基本使用

1. 在 vue 的做用域中

   • 注意: 使用別名必定要加 :

   <!--路由的入口  就是一個 a 標籤-->
   <router-link to='/home'>主頁</router-link>
   
   <!--入口使用  別名 -->
   <router-link :to='{name:'home'}'>主頁</router-link>
   
   <!--路由的出口--> 
   <router-view></router-view>
   
   <!--可使用單閉合標籤-->
   <router-view/>

2. 在 script 中

   // 導入  vue  以及 vue-router
   <script src="https://cdn.bootcss.com/vue/2.5.21/vue.js"></script>
   <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
   
   let Home={
       template:`<h1>Home 主頁</h1>`
   }
   
   let router = new VueRouter({
       // mode: 'history',    // 此方法 是不顯示地址欄中的井號
       routes:[
           // {path:'路由地址', name:'別名', redirect:'重定向 寫 路由的Url'},
           {path:'/home', name:'home', component: Home},  // component 返回的組件
       ]
   })
   new Vue({
       el:'#app',
       //掛載路由  Es6 寫法至關於  router: router
    router ，
   
   })

   路由對象 以及信息

   //  $  至關於 vue 內部的變量實例
   
   new Vue({
       el:'#app',
       //掛載路由  Es6 寫法至關於  router: router
       router ,
       // 鉤子函數  掛載完 DOM 以後 運行
       mounted(){
           console.log(this.$router)  // app 的路由對象
           console.log(this.$route)   // 當前路由的對象   
       },
       //監聽屬性  
       watch:{
        // 監聽每一次路由切換以後的當前路由信息
           '$route': function(to, from){
               console.log(to);  // 要切換到的路由信息
               console.log(from);  // 切換前的路由信息
               // ajax 請求數據
               console.log(this.data.courseList)
           }
   } ,
   });

vue-cli 中監聽路由動向

// 寫在路由的 router 中
        // scroll Behavior  滾動行爲
...      //  saved Position   保存的位置
scrollBehavior(to, from, savedPosition) {
    // to 是將要跳轉到的頁面  from 是從哪裏跳轉的
    console.log(to,from,111111111111);
    if (savedPosition) {
        // console.log(savedPosition);
        return savedPosition
    } else {
        //點擊 頁面中 的上一頁 下一頁 觸發  {x: 0, y: 0} 會顯示在控制檯中
        return {x: 0, y: 0}
    }
}
...

路由的 動態匹配

• 在路入口中的傳遞參數

  入口中 定義 params 可傳遞多個 參數

  <router-link :to="{name: 'index', params:{id: 10}}">index</router-link>

  定義 query 傳遞參數: 刷新不會丟失 數據

  <router-link :to="{name: 'index', query:{id: 10}}">index</router-link>

• 路由中 接收參數

  {path:'/index:id', name:'index',component: Index}

• 在 組件中使用參數

  template:
  `<div>
  {{ this.$route.params.id }}  經過路由中的  /user/:id  params 對象獲取
  {{ this.$route.query.key }}  經過地址欄中傳遞的對象 來獲取
  </div>`

嵌套路由

• 在一級路由中定義 children:[...]

  let router = new Router({
      routes: [
      {
        path: '/user/',  // 匹配URL路徑的
        name: 'user',  // 路由別名
        children: [
              {path: 'info', name: 'user-info', component: UserInfo},  // 匹配 /users/info
              {path: 'posts', name: 'user-posts', component: UserPosts},  // 匹配 /user/posts
          ]
      },
          ...
      ]
   })

編程式導航（代碼模式）和聲明式導航（a標籤模式）

• 編程試導航就是 用代碼來跳轉到指定的頁面

• 以前用的 試 聲明試 a標籤

  經過點擊事件 給 全局的 $router 推入一個 路由

  <template>
    <div class="about">
      <button @click="goHome">點我返回主頁</button>
    </div>
  </template>
  
  <script>
      export default {
          name: 'About',
          methods: {
              goHome(){
                  // 經過代碼跳轉到 home
                  this.$router.push({name: 'home'})
              }
          }
      }
  </script>