路由基礎(chǔ)介紹

前端路由有什么優(yōu)點(diǎn)和缺點(diǎn)?

• 優(yōu)點(diǎn):用戶體驗(yàn)好,不需要每次都從服務(wù)器全部獲取,快速展現(xiàn)給用戶
• 缺點(diǎn):不利于SEO;使用瀏覽器的前進(jìn),后退鍵的時(shí)候會(huì)重新發(fā)送請(qǐng)求,沒有合理地利用緩存;單頁面無法記住之前滾動(dòng)的位置,無法在前進(jìn),后退的時(shí)候記住滾動(dòng)的位置

vue-router用來構(gòu)建SPA
導(dǎo)航 : <router-link></router-link>或者this.$router.push({path:""})
視圖 : <router-view></router-view>

1.動(dòng)態(tài)路由

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import goods from '@/components/goods'

Vue.use(Router)

export default new Router({
  mode:"history",
  routes: [
    { path: '/', redirect: 'goods' },  //redirect重定向到goods，即設(shè)置goods為默認(rèn)路由
    {
      path: '/goods/:goodId/user/:name',
      name: 'goods',
      component: goods
    }
  ]
})

// components/goods.vue
<template>
    <div>
        <p>我是商品id{{$route.params.goodId}}</p>
        <p>我是用戶{{$route.params.name}}</p>
    </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

動(dòng)態(tài)路由

2.嵌套路由

父路由嵌套子路由
router-link的路由方式 :

• to后面跟絕對(duì)路徑
• to后面寫相對(duì)路徑,再加上append屬性,就會(huì)在當(dāng)前路徑上追加

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import goods from '@/components/goods'
import title from '@/components/title'
import image from '@/components/image'


Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    { path: '/', redirect: 'goods' },
    {
      path: '/goods',
      name: 'goods',
      component: goods,
      //子路由
      children: [
        {
          path: 'title',
          name: 'title',
          component: title
        },
        {
          path: 'image',
          name: 'image',
          component: image
        }
      ]
    }
  ]
})

// components/goods.vue
<template>
    <div>
        <p>我是商品id{{$route.params.goodId}}</p>
        <p>我是用戶{{$route.params.name}}</p>
        <router-link to='/goods/title'>顯示標(biāo)題子組件</router-link>
        <router-link to='image' append>顯示圖片子組件</router-link>
        <!-- 父組件中嵌套子組,router-view是讓子組件顯示的地方 -->
        <router-view></router-view> 
    </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

//components/title.vue
<template>
    <div>
        我是title子組件
    </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

//components/image.vue
<template>
    <div>
        我是image子組件
    </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

image子組件

title子組件

3.編程式路由

通過js來實(shí)現(xiàn)頁面的跳轉(zhuǎn)
$router.push('name')
$router.push({path:'name'})
$router.push({path:'name?a=123'})或者$router.push({path:'name',query:{a:123'}})
$router.go(1)

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import goods from '@/components/goods'
import title from '@/components/title'
import image from '@/components/image'
import cart from '@/components/cart'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    { path: '/', redirect: 'goods' },
    {
      path: '/goods',
      name: 'goods',
      component: goods,
      children: [
        {
          path: 'title',
          name: 'title',
          component: title
        },
        {
          path: 'image',
          name: 'image',
          component: image
        }
      ]
    },
    {
      path: '/cart',
      name: 'cart',
      component: cart
    }
  ]
})

// components/goods.vue
<template>
    <div>
        <p>我是商品id{{$route.params.goodId}}</p>
        <p>我是用戶{{$route.params.name}}</p>
        <router-link to='/goods/title'>顯示標(biāo)題子組件</router-link>
        <router-link to='image' append>顯示圖片子組件</router-link>
        <!-- 父組件嵌套子組,router-view是讓子組件顯示的地方 -->
        <router-view></router-view> 

        <router-link to='/cart'>跳轉(zhuǎn)購物車組件</router-link>
        <button @click="toCart">跳轉(zhuǎn)購物車組件</button>
    </div>
</template>

<script>
export default {
    methods:{
        toCart(){
            // this.$router.push('/cart')  
            // this.$router.push({path:'/cart'})
            this.$router.push({path:'/cart?goodId=123'})
            // this.$router.go(-1)
        }
    }
}
</script>

<style>

</style>

// components/cart.vue
<template>
    <div>
        我是購物車組件
        <!-- this.$router.push({path:'/cart?goodId=123'}) 用query來接收參數(shù)-->
        <span>{{$route.query.goodId}}</span>  
    </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

goods組件

點(diǎn)擊鏈接和按鈕都能成功跳轉(zhuǎn)到購物車組件

cart組件

4.命名路由和命名視圖

給路由定義不同的名字，根據(jù)名字進(jìn)行匹配
給不同的router-view定義名字，通過名字進(jìn)行對(duì)應(yīng)組件的渲染

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import goods from '@/components/goods'
import title from '@/components/title'
import image from '@/components/image'
import cart from '@/components/cart'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    { path: '/', redirect: 'goods' },
    {
      path: '/goods',
      name: 'goods',
      components: {
        default:goods,
        title:title,
        image:image
      }
    },
    {
      path: '/cart/:cartId',
      name: 'cart',
      component: cart
    }
  ]
})

// App.vue
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
    <router-view name='title' class="left"></router-view>
    <router-view name='image' class="right"></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.left,.right{
  float: left;
  width: 49%;
  border: 1px solid gray;
}
</style>