vue-router文檔html
Vue.js——vue-router 60分鐘快速入門
Demo:https://github.com/keepfool/vue-tutorials/blob/master/06.Router/basic/basic_04.htmlgit
路由配置實際上是分兩步的,第一步把vue-router的指令方法掛到Vue實例,第二步纔是添加路由配置上。github
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。vue-router
<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代碼,使用了用了具名路徑。api
params: {id: '01'}
對應路由配置中的/:id
,使用this.$route.parames.id
接收params參數。
也可以使用query: {id: '01'}
傳參,而後使用this.$route.query.id
接收參數app