vue基礎——命名路由
阿新 • • 發佈:2019-01-09
路由配置,是vue使用的基礎中的基礎,採用傳統的方式會有些麻煩且不清晰,而命名路由的方式,無論path多長多繁瑣,都能直接通過name就匹配到了,十分方便,所以,強烈推薦使用命名路由的方式
傳統的方式
命名路由的方式
樣例程式碼
import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) const Home = { template: '<div>This is Home</div>' } const Foo = { template: '<div>This is Foo</div>' } const Bar = { template: '<div>This is Bar {{ $route.params.id }}</div>' } const router = new VueRouter({ mode: 'history', base: __dirname, routes: [ { path: '/', name: 'home', component: Home }, { path: '/foo', name: 'foo', component: Foo }, { path: '/bar/:id', name: 'bar', component: Bar } ] }) new Vue({ router, template: ` <div id="app"> <h1>Named Routes</h1> <p>Current route name: {{ $route.name }}</p> <ul> <li><router-link :to="{ name: 'home' }">home</router-link></li> <li><router-link :to="{ name: 'foo' }">foo</router-link></li> <li><router-link :to="{ name: 'bar', params: { id: 123 }}">bar</router-link></li> </ul> <router-view class="view"></router-view> </div> ` }).$mount('#app')
參考文件:https://router.vuejs.org/zh/guide/essentials/named-routes.html