内容简介:使用 Rediret 會造成 Browser 上的網址改變,但有時候我們不希望網址改變,此時就要使用 Alias。macOS Mojave 10.14.5Node 12.4.0
使用 Rediret 會造成 Browser 上的網址改變,但有時候我們不希望網址改變,此時就要使用 Alias。
Version
macOS Mojave 10.14.5
Node 12.4.0
Vue CLI 3.8.4
Vue 2.6.10
Vue-router 3.0.3
Alias
/story /about
與 redirect 不同的是 browser 的網址並沒有改變成 /about
By String
router.js
import Vue from 'vue'; import Router from 'vue-router'; import Home from './views/Home.vue'; Vue.use(Router); export default new Router({ routes: [ { path: '/', name: 'home', component: Home }, { path: '/about', alias: '/story', name: 'about', component: () => import(/* webpackChunkName: "about" */ './views/About.vue') } ] });
14 行
{ path: '/about', alias: '/story', name: 'about', component: () => import(/* webpackChunkName: "about" */ './views/About.vue') }
新增 alias
property,表示若網址為 /story
時,也會顯示 About
component,且網址不會改成 /about
。
By Array
router.js
import Vue from 'vue'; import Router from 'vue-router'; import Home from './views/Home.vue'; Vue.use(Router); export default new Router({ routes: [ { path: '/', name: 'home', component: Home }, { path: '/about', alias: [ '/story', '/about-us' ], name: 'about', component: () => import(/* webpackChunkName: "about" */ './views/About.vue') } ] })
14 行
{ path: '/about', alias: [ '/story', '/about-us' ], name: 'about', component: () => import(/* webpackChunkName: "about" */ './views/About.vue') }
alias
property 也能搭配 array,表示 /story
與 /aboutus
都是 alias。
Conclusion
- Vue Router 的 alias 使用上非常簡單,若單一 alias 就使用 string,若多個 alias 就使用 array
以上所述就是小编给大家介绍的《Vue Router 之 Alias》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
基于MVC的JavaScript Web富应用开发
麦卡劳(Alex MacCaw) / 李晶、张散集 / 电子工业出版社 / 2012-5 / 59.00元
《JavaScript Web 富应用开发》Developing JavaScript Web Applications是 Alex MacCaw 的新作(由O'Reilly出版发行),本书系统而深入的讲解了如何使用最前沿的Web技术构建下一代互联网富应用程序。作者 Alex MacCaw 是一名Ruby/JavaScript 程序员,在开源社区中很有名望,是Spine框架的作者,同时活跃在纽约、......一起来看看 《基于MVC的JavaScript Web富应用开发》 这本书的介绍吧!