Vue Router 之 Alias

栏目: 编程语言 · 发布时间: 5年前

内容简介:使用 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

Vue Router 之 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》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

粒子群优化算法及其工程应用

粒子群优化算法及其工程应用

刘波 / 2010-8 / 28.00元

《粒子群优化算法及其工程应用》的主要内容是:粒子群优化(PSO)算法是一种基于群体智能的新兴演化计算技术,广泛用于解决科学研究和工程实践中的优化问题。《粒子群优化算法及其工程应用》主要阐述粒子群优化算法的基本理论及其在机械故障诊断和机械工程测试中的应用成果。全书共5章,第1至3章介绍了PSO算法的原理和各种改进、变体PSO算法的原理,第4章介绍了PSO算法在机械工程领域的应用,第5章介绍了PSO算......一起来看看 《粒子群优化算法及其工程应用》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具