Vue學習筆記(4)-帶參數路由，嵌套路由，編程式導航

時間 2020-05-13

原文原文鏈接

路由傳參

明確使用場景：後期不少業務可能須要傳遞參數，如編輯時須要傳遞IDhtml
若是在路由配置中添加參數設置vue

{ name:'Product', // 添加路由的參數配置,參數的標識就是:
        // id這個名稱你能夠隨意，它就至關於一個形參，它所影響不是你如何傳遞參數，而是後期如何獲取參數
        path:'/product/:id', component:Product }

在調用路由的時候的格式vue-router

<!-- 這裏傳遞不須要添加: -->
<router-link to="/product/1">水果</router-link>

獲取路由參數編程

經過$route能夠獲取路由參數對象:this.$route數組
裏面有一個params屬性，就存儲着當前路由參數，它是一個對象app

// 在mounted鉤子函數中獲取參數
mounted(){ console.log(this.$route) // 經過this.$route.params能夠來獲取當前的路由參數
    var id = this.$route.params.id if(id == 1){ this.type = '水果' }else if(id == 2){ this.type = '電器' }else if(id == 3){ this.type = '服裝' } }

上面代碼有一問題：沒法去響應路由參數的變化，說得具體一點：mounted鉤子函數中的代碼沒法響應路由參數的變化ide

1.mounted鉤子函數能夠響應路由的變化:由於路由變化，須要從新加載路由所對應的組件，若是加載組件，那麼就會執行組件的完整的生命週期，因此mounted可以觸發函數

2.可是mounted鉤子函數沒法響應同一個路由的參數變化。提醒一下，當使用路由參數時，例如從 /product/1 導航到 /product/2，原來的組件實例會被複用。由於兩個路由都渲染同個組件，比起銷燬再建立，複用則顯得更加高效。不過，這也意味着組件的生命週期鉤子不會再被調用ui

監聽(響應)路由的變化this

監聽方式
處理參數的方式

 watch: { // 監聽路由的參數的變化
     // to是目標路由對象
     // from:源路由對象
     '$route'(to, from) { var id = to.params.id if (id == 1) { this.type = '水果' } else if (id == 2) { this.type = '電器' } else if (id == 3) { this.type = '服裝' } } }

細節：

從一個路由跳轉到/product的效果是mounted在起做用
從/product/1到/proudct/2,這是watch在起做用

嵌套路由

爲何須要嵌套路由

實際生活中的應用界面，一般由多層嵌套的組件組合而成。一樣地，URL 中各段動態路徑也按某種結構對應嵌套的各層組件
若是須要讓一個組件內部的某個部分的內容進行動態改變，那麼就須要添加嵌套路由
由於咱們但願可以匹配的路由所對應的組件在某個組件內部的某個位置出現，而不是覆蓋當前頁面

如何添加嵌套路由的配置

經過children來設置
細節：不要在嵌套路由的path值中添加/,不然會破壞當前路由的層級

var router = new VueRouter({ // 3.經過routes來添加路由配置，每一個路由配置都是一個對象，裏面有經常使用屬性，如name,path,component,redirect
 routes: [ { name: 'Index', path: '/index', component: Index }, { name: 'Product', // 添加路由的參數配置,參數的標識就是:
            // id這個名稱你能夠隨意，它就至關於一個形參，它所影響不是你如何傳遞參數，而是後期如何獲取參數
            path: '/product/:id', component: Product, // 添加當前路由的嵌套路由，經過children來添加
            // children是一個數組，裏面的每個值都是一個具體的路由配置對象
            // 細節：嵌套路由不要添加/，不然會形成路由層級的問題
 children:[ { name:'Shui', path:'shui', component:Shui }, { name:'Dian', path:'dian', component:Dian }, { name:'Fu', path:'fu', component:Fu } ] } ] })

如何使用嵌套路由：如何進行嵌套路由的跳轉

var Product = Vue.component('product', { template: `<div>{{type}} <button>單擊展現詳細信息</button>
    // 設置嵌套路由對應組件的展現區域
    <router-view></router-view>
</div>`,
......

實現嵌套路由的跳轉

之前是經過router-link來實現路由跳轉--聲明式導航-
如今咱們須要經過代碼進行跳轉--編程式導航
如何實現編程式導航：經過this.$router.push。

nav(){ if (this.id == 1) { // 使用編程式導航跳轉到嵌套路由
        this.$router.push({name:'Shui'}) } else if (this.id == 2) { this.$router.push({name:'Dian'}) } else if (this.id == 3) { this.$router.push({name:'Fu'}) } }

案例完整代碼

<!DOCTYPE html>
<html lang='en'>

<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <meta http-equiv='X-UA-Compatible' content='ie=edge'>
  <title>Document</title>
  <script src="./lib/vue2.js"></script>
  <script src="./lib/vue-router.js"></script>
</head>

<body>
  <div id='app'>
    <router-link to="/index">首頁</router-link>
    <router-link to="/product/1">水果</router-link>
    <router-link to="/product/2">電器</router-link>
    <router-link to="/product/3">服裝</router-link>
    <h2>下面是路由所對應的組件的展現區域</h2>
    <router-view></router-view>
  </div>
  <script>
    // 添加組件
    var Index = Vue.component('index', { template: '<div>首頁</div>' }) var Product = Vue.component('product', { template: `<div>{{type}} <button @click='nav'>單機展現詳細信息</button>
      <router-view></router-view>
      </div>`,
 data() { return { type: "??", id: '' } }, methods: { nav() { if (this.id == 1) { // 使用編程式導航跳轉到嵌套路由
            this.$router.push({ name: 'Shui', params: { username: 'jackandrose' } }) } else if (this.id == 2) { this.$router.push({ path: `/product/${this.id}/dian`
 }) } else if (this.id == 3) { this.$router.push({ name: 'Fu' }) } } }, watch: { // 監聽路由的參數的變化
        // to是目標路由對象
        // from是源路由對象
        '$route'(to, from) { this.id = to.params.id if (this.id == 1) { this.type = '水果' } else if (this.id == 2) { this.type = '電器' } else if (this.id == 3) { this.type = '服裝' } } }, // 在mounted鉤子函數中獲取參數
 mounted() { console.log(this.$route) // 經過this.$route.params能夠來獲取當前的路由參數
        this.id = this.$route.params.id if (this.id == 1) { this.type = '水果' } else if (this.id == 2) { this.type = '電器' } else if (this.id == 3) { this.type = '服裝' } } }) var Shui = Vue.component('shui', { template: '<div>水果詳細信息</div>', mounted() { console.log(this.$route) } }) var Dian = Vue.component('dian', { template: '<div>電器詳細信息</div>' }) var Fu = Vue.component('fu', { template: '<div>服裝詳細信息</div>' }) // 經過new VueRouter構造函數來建立路由
    var router = new VueRouter({ // 經過routes來添加路由配置，每一個路由配置都是一個對象，裏面有經常使用屬性，name，path，component
 routes: [{ path: '/', // 實現重定向
 redirect: { name: 'Index' } }, { name: 'Index', path: '/index', component: Index }, { name: 'Product', // 添加路由的參數配置，參數的標識就是：
          // id這個名稱你能夠隨意定義，它就至關於一個形參，她所影響不是你如何傳遞參數，而是後期如何獲取參數
          path: '/product/:id', component: Product, // 添加當前路由的嵌套路由，經過children來添加
          // children是一個數組，裏面的每個值都是一個具體的配置對象
          // 細節：嵌套路由不要添加/,不然會形成路由層級的問題
 children: [{ name: 'Shui', path: 'shui', component: Shui }, { name: 'Dian', path: 'dian', component: Dian }, { name: 'Fu', path: 'fu', component: Fu }, ] } ] }) var vm = new Vue({ el: '#app', // 掛載路由
 router, data: {} }) </script>
</body>

</html>