参考

• 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吸收参数