alias 的使用

alias 的使用

课程来自 https://www.jspang.com

alias，以为别名，实际上就是给一个路由加上另一个url，当你使用这个url时，依然可以跳转到同一个组件。

我们来看这样的一个例子：

在路由配置文件 router.js 中：

import Vue from 'vue';
import Router from 'vue-router';
import Hello from '@/components/HelloWorld'
import Params from '@/components/Params';
import Hi1 from '../components/Hi1.vue';

Vue.use(Router);

export default new Router({
    routes: [
        {
            path: '/',
            name: 'Hello',
            component: Hello,
            alias: '/home',
        },
    ]
})

我们为 '/' 这个路由地址重新配置了一个别名，该别名为 '/home'，这就意味着，当我们输入 ‘/home’ 时，组件 Hello 应该出现。

我们编写一下 Hello 组件：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      msg: 'Welcome to your first Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

在 App.vue 中：

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <p>
      <router-link to="/">\</router-link>|
      <router-link to="/home">Home</router-link>|
    </p>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

运行的结果为：

可以看出，无论是 “/” 还是 “/home” 最后显示的都是 HelloWorld 这个组件。

与重定向不同时，alias 会改变url，但是组件还是同样的组件，而重定向当你输入url时，url 会改变成重定向的 url 地址。