vue-router 學習

參考

• vue-router文檔

• 使用Vue快速開發單頁應用 vue-router

• Vue.js——vue-router 60分鐘快速入門
  Demo:https://github.com/keepfool/vue-tutorials/blob/master/06.Router/basic/basic_04.html

路由配置

路由配置實際上是分兩步的，第一步把vue-router的指令方法掛到Vue實例，第二步纔是添加路由配置上。

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from 'App.vue'
Vue.use(VueRouter) // 第一步

//路由配置項:http://router.vuejs.org/zh-cn/options.html
const router = new VueRouter({
  hashbang = true,
  abstract = false,
  history = true,
  saveScrollPosition = true,
  transitionOnLoad = false,
  suppressTransitionError = false,
  root = null,
  linkActiveClass = 'v-link-active'
}) // 第二步

//路由映射: http://router.vuejs.org/zh-cn/api/map.html
router.map({
    '/': {
      name: 'index',
      title: '所有',
      component: (resolve) => require(['./components/main/index.vue'], resolve)
    },
    '/good': {
      name: 'good',
      title: '精華',
      component: (resolve) => require(['./components/main/index.vue'], resolve)
    }
  })
router.start(App, '#app')

路由參數

import Home from 'components/Home'
import News from 'components/News'
import NewsDetail from 'components/NewsDetail'
import Message from 'components/Message'
import About from 'components/About'
router.map({
    '/home': {
        component: Home,
        subRoutes: {
            '/news': {
                name: 'news',
                component: News,
                subRoutes: {
                    'detail/:id': {
                        name: 'detail',
                        component: NewsDetail
                    }
                }
            },
            '/message': {
                component: Message
            }
        }
    },
    '/about': {
        component: About
    }
})

/:id是路由參數。例如：若是要查看id = '01'的News詳情，那麼訪問路徑是/home/news/detail/01。

<template id="home">
    <div>
        <ul class="nav nav-tabs">
            <li>
                <a v-link="{ name: 'news'}">News</a>
            </li>
            <li>
                <a v-link="{ path: '/home/message'}">Messages</a>
            </li>
        </ul>
        <router-view></router-view>
    </div>
</template>

<template id="news">
    <div>
        <ul>
            <li>
                <a v-link="{ name: 'detail', params: {id: '01'} }">News 01</a>
            </li>
            <li>
                <a v-link="{ path: '/home/news/detail/02'}">News 02</a>
            </li>
            <li>
                <a v-link="{ path: '/home/news/detail/03'}">News 03</a>
            </li>
        </ul>
        <div>
            <router-view></router-view>
        </div>
    </div>
</template>

<a v-link="{ name: 'news'}">News</a>和<a v-link="{ name: 'detail', params: {id: '01'} }">News 01</a>這兩行HTML代碼，使用了用了具名路徑。

params: {id: '01'}對應路由配置中的/:id，使用this.$route.parames.id接收params參數。
也可以使用query: {id: '01'}傳參，而後使用this.$route.query.id接收參數