Vue-router 第7节 alias别名的使用

Vue-router 第7节 alias别名的使用

---

目录

• Vue-router 第7节 alias别名的使用
  • 第7节 alias别名的使用

第7节 alias别名的使用

使用alias别名的形式，也可以实现类似重定向的效果。

1. 首先我们在路由配置文件里（/src/router/index.js），给上节课的Home路径起一个别名，daisy。加入以下代码：

{
	path:'/hi1',
    component:Hi1,
    alias:'daisy'
}

2. 配置我们的<router-link>，起过别名之后，可以直接使用<router-link>标签里的to属性，进行重新定向。

<router-link to="/hi1">Hi1</router-link>|  //这一行在之前就要有
<router-link to="/daisy">daisy</router-link>  //加入这行代码

看一下效果：

我们点击daisy：

可以看到内容是Hi1页面的内容，地址栏也有变化。

redirect和alias的区别

• redirect：URL路径没有改变，只是改变了<router-view>中的内容；
• alias：URL是直接改变了url的值，把url变成了真实的path路径。这种情况更友好，用户能知道自己访问的路径。

填坑
这里还有一个小坑，alias别名不要用到path为'/'中，不然是不起作用的：

{
  path: '/',
  component: Hello,
  alias:'/home'
}

vue不支持这样使用