開始

1. 引入vue和vue-router

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 組件來導航. -->
    <!-- 通過傳入 `to` 屬性指定鏈接. -->
    <!-- <router-link> 默認會被渲染成一個 `<a>` 標簽 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的組件將渲染在這里 -->
  <router-view></router-view>
</div>

// 0. 如果使用模塊化機制編程，導入Vue和VueRouter，要調用 Vue.use(VueRouter)

// 1. 定義（路由）組件。
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2. 定義路由
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// 3. 創(chuàng)建 router 實例，然后傳 `routes` 配置
const router = new VueRouter({
  routes // （縮寫）相當于 routes: routes
})
// 4. 創(chuàng)建和掛載根實例。
const app = new Vue({
  router
}).$mount('#app')

動態(tài)路由匹配

案例：即使路由中，某些值不同，但是可能還是需要使用同一路由

// 此處模板字符中參數，是和path相關聯的組件
// 通過 $route.params.username 獲取，還有 $route.hash,$route.query
const User = {
    template: `<p>{{ $route.params.username }}</p>`
}
// 通過動態(tài)路由，不同的路由可以跳轉相同的頁面
const routes = [
    {
        path: '/user/:username',
        component: User
    }
]
const router = new VueRouter({
    routes
});
const vm = new Vue({
    router
}).$mount('#app');

關于 router，routes， route

1. 路由配置的時候使用的是routes
2. vm 上掛載時使用的是router
3. 在組件中獲取路由對象$route

響應路由參數的變化

1. 當使用路由參數時，從 /user/foo 導航到 user/bar，原來的組件實例會被復用。但是，組件生命周期的鉤子函數將不會被調用，此時，要對路由參數的變化做出響應，可以使用watch在組件中監(jiān)視$route

const user = {
    template: '<p> $route.params.username </p>',
    watch: {
        '$route' (to,from) {

        }
    }
}

2. 還可以使用，beforeRouteUpdate監(jiān)聽

// 具體的使用，之后有詳細介紹
const user = {
    template: '<span>{{ $route.param.user }}</span>',
    beforeRouteUpdate: function (to,from,next) {
        // 響應路由變化，不要忘了用next()方法
    }
}

嵌套路由

有事在模板中依舊會有router-view元素，即嵌套路由

1. 模板大致是這樣的

<div id="app">
  <router-view></router-view>
</div>

const User = {
  template: `
    <div class="user">
      <h2>User {{ $route.params.id }}</h2>
      <router-view></router-view>
    </div>
  `
}

2. 因此在配置路由的時候，需要使用新項，children。當/user/foo的時候，如果想要被嵌套的路由也有所顯示，需要進行配置。

const routes = [
    {
        path: '/user/:id',
        component: User,
        children: [
            {
                // 當/user/:id匹配成功，userHome 會顯示在 User 的 router-view 中
                // 如果沒有配置該項，被嵌套的路由是不會渲染任何東西的
                path: '',
                component: UserHome
            }
        ]
    }
]

編程式導航

編程式導航是在Vue實例中使用this.$router對象，注意使用的不是在組件中使用的$route

1. 導航一共有三種方式

• this.$router.push()
• this.$router.replace()
• this.$router.go()

2. push 和 replace 的參數相同，方式稍有不同

• path，字符串,當有path時，params不起作用
• name，字符串，結合params使用，需要在定義路由的時候加上name
• params，對象
• query，對象

// 使用模板字符串結合變量
router.push({ path: `/user/${userId}` }) 
// /home?username=yf&userId=19
router.push({
    path:'home',
    params: {
        username: 'yf',
        userId: 19
    }
});

router.replace(location)

router.go(n)

命名路由

使用命名路由，方便使用

// 定義的時候使用命名路由
const router = new VueRouter({
    routes:[
        {
            path: '/user/:userId',
            // 定義的時候加上 name
            name: 'user',
            component: User
        }
    ]
})
// 鏈接的時候使用命名路由
router.push({name:'user',params: { userId: 123 }});

<!--鏈接的時候使用命名路由-->
<router-link to='{name:"user",params:{userId: 123}}'></router-link>

命名視圖

命名視圖使用的場景，當一個頁面中有多個router-view，是并列關系。比如，頁面中左邊的導航欄有一個router-view,右邊顯示部分有一個router-view。那么，需要為每個router-view添加一個name。同時，routes中component選項需要改變components

const routes = [
    {
        path: '/',
        components: {
            // 路由沒有起名字的，默認為 default
            default: Foo,
            // 有名字的
            routerViewA: Bar
        }
    }
]

重定向和別名

當訪問某個頁面，需要重定向的時候。別名，當路由是/b，地址欄上也確實是這個時，但實際上可能訪問的是/a

// 重定向
const routes = [
    {
        path: '/a',
        redirect: '/b'
        // redirect: {name:'user'}
        // redirect: oldPath => 處理之后返回新地址
    }
]

// 別名
const routes = [
    path: '/a',
    alias: '/b'
]

HTML5 History

1. ajax無法使用前進后退按鈕還原狀態(tài)，但是h5通過pushState（無刷新）實現。將一個特定的url推送到歷史記錄中，通過后退鍵，使得頁面恢復到沒有發(fā)送ajax請求前的狀態(tài)
2. 更多的操作需要在后臺配置，官網上提供了各種后臺的寫法
3. 前臺只是添加一個屬性mode