vue-router路由基礎

小栗旬發表於2019-04-28
Vue路由

1. 路由初體驗

效果類似掘金導航, 導航切換

在這裡插入圖片描述
在這裡插入圖片描述

1.1 引入路由檔案

<script src="./vue-router.js"></script>
複製程式碼

1.2 準備路由需要的元件

var index = Vue.component('index',{
    template:'<div>首頁</div>'
})
var productType = Vue.component('productType',{
    template:'<div>這裡顯示商品編號</div>'
})
複製程式碼

1.3 建立路由物件, 在這個物件裡面配置路由規則

const router = new VueRouter({

})
複製程式碼

1.4 通過routes屬性配置路由規則,

他是一個陣列, 陣列中放的是物件, 每個物件對應一條規則, ​

並且每個物件裡面都含有name(表示路由規則名稱)/path(表示路徑)/component(表示路徑對應的元件)屬性

const router = new VueRouter({
    routes:[
        {name:'index', path:'/index', component:index},
        {name:'productType', path:'/product_type', component:productType}
    ]
})
複製程式碼

1.5 在vue例項中注入路由, 這樣整個應用程式都會擁有路由了

var vm = new Vue({
    el: '#app',
    // 5. 在vue例項中注入路由, 這樣整個應用程式都會擁有路由了
    router,
    data: {

    }
})
複製程式碼

1.6 通過router-view挖坑, 路徑匹配到的元件都會渲染到這個元件來

<div id="app">
	<router-view></router-view>
</div>
複製程式碼

1.7 vue路由中通過router-link去做跳轉, 他有一個to屬性, to屬性的值必須和path中的值對應

router-link將來會被渲染成為a標籤, 他的to屬性會被渲染成a標籤的href屬性, 但它的值前面會加一個#,變為錨點

<div id="app">
    <ul>
        <li><router-link to="/index">首頁</router-link></li>
        <li><router-link to="/product_type">蔬菜</router-link></li>
        <li><router-link to="/product_type">水果</router-link></li>
        <li><router-link to="/product_type">肉類</router-link></li>
    </ul>
    <router-view></router-view>
</div>
複製程式碼

2. 路由引數

2.1 router傳遞引數

<div id="app">
    <ul>
        <li><router-link to="/index">首頁</router-link></li>
        <li><router-link to="/product_type/11">蔬菜</router-link></li>
        <li><router-link to="/product_type/22">水果</router-link></li>
        <li><router-link to="/product_type/33">肉類</router-link></li>
    </ul>
    <router-view></router-view>
</div>
複製程式碼
const router = new VueRouter({
    routes:[
        {name:'index', path:'/index', component:index},
        {name:'productType', path:'/product_type/:id', component:productType}
    ]
})
複製程式碼

2.2 接收引數

2.2.1 元件接收引數

在html中獲取路由引數, 通過$route.params.引數名

var productType = Vue.component('productType',{
    //在html中獲取路由引數, 通過$route.params.引數名
    template:'<div>這裡顯示商品編號{{$route.params.id}}</div>',
})
複製程式碼

2.2.2 js接收引數

在js中獲取路由引數, 通過this.$route.params.引數名

var productType = Vue.component('productType',{
    //在html中獲取路由引數, 通過$route.params.引數名
    template:'<div>這裡顯示商品編號{{$route.params.id}}</div>',
    //模板編譯完成之後呼叫
    mounted() {
        //在js中獲取路由引數, 通過this.$route.params.引數名
        console.log(this.$route.params.id)
    },
})
複製程式碼

3. 響應路由引數的變化

​ 提醒一下，當使用路由引數時，例如從 /user/foo 導航到 /user/bar，原來的元件例項會被複用。因為兩個路由都渲染同個元件，比起銷燬再建立，複用則顯得更加高效。不過，這也意味著元件的生命週期鉤子不會再被呼叫。

3.1 複用元件時，想對路由引數的變化作出響應的話，你可以簡單地 watch (監測變化) $route 物件：

var productType = Vue.component('productType',{
    data(){
        return {
            allProduct:''
        }
    },
    //在html中獲取路由引數, 通過$route.params.引數名
    template:`
<div>
這裡顯示商品編號{{$route.params.id}}
<p>{{allProduct}}</p>
</div>
`,
    //模板編譯完成之後呼叫
    mounted() {
        //在js中獲取路由引數, 通過this.$route.params.引數名
        console.log(this.$route.params.id)
    },
    watch: {
        //to表示你將要去的路由物件, from表示你從哪個路由來
        '$route'(to,from){
            console.log(to)
            console.log(from)
            if(to.params.id==='11'){
                this.allProduct = '葫蘆不等等'
            }else if(to.params.id==='22'){
                this.allProduct = '西瓜'
            }else{
                this.allProduct = '豬肉/牛肉'
            }
        }
    }
})
複製程式碼

3.2 或者使用 2.2 中引入的 beforeRouteUpdate 導航守衛：

const User = {
  template: '...',
  beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }
}
複製程式碼

4. 巢狀路由和程式設計式導航

巢狀路由

在這裡插入圖片描述

4.1 巢狀路由

4.1.1 巢狀路由建立

const router = new VueRouter({
    routes:[
        {name:'index', path:'/index', component:index},
        {name:'productType', path:'/product_type/:id', component:productType,
             children:[
                 //巢狀中的path不能加'/'
                 {name:'cookBook', path:'cook_book',component:cookBook}
             ]
        }
    ]
})
複製程式碼
var cookBook = Vue.component('cookBook]',{
    template:'<div>我這裡很多食譜, 歡迎檢視</div>'
})
複製程式碼

4.1.2 在被巢狀的元件中佔坑''

var productType = Vue.component('productType',{               
    template:`
            <div>
            這裡顯示商品編號{{$route.params.id}}
            <p>{{allProduct}}<button @click='jumpTo'>檢視食譜</button></p>
            <router-view></router-view>
            </div>
    	`
})
複製程式碼

4.2 程式設計式導航

通過 '<button @click='jumpTo'>檢視食譜' 跳轉

var productType = Vue.component('productType',{               
    template:`
            <div>
            這裡顯示商品編號{{$route.params.id}}
            <p>{{allProduct}}<button @click='jumpTo'>檢視食譜</button></p>
            <router-view></router-view>
            </div>
    	`
})
methods: {
    jumpTo(){
        //通過$router來跳轉
        this.$router.push({name:'cookBook'})
    }
},
複製程式碼

5. 路由重定向

重定向也是通過 routes 配置來完成

{name:'default',path:'*',redirect: '/index'},
複製程式碼

重定向的目標也可以是一個命名的路由：

{name:'default',path:'*',redirect: {name:'index'}}
複製程式碼

甚至是一個方法，動態返回重定向目標：

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: to => {
      // 方法接收 目標路由 作為引數
      // return 重定向的 字串路徑/路徑物件
    }}
  ]
})
複製程式碼

相關文章