参考

• Demo:

路由配置

路由配置其实是分两步的，第一步把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.htmlconst 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.htmlrouter.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。

<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接收参数