Vue-router 04重定义、alias别名

一、重定义

如果我们想从另一个不是home网址的链接中回到home主页，我们可以通过重定义的方法也返回home主页，重定义的组件都是要在index.js的routes数组中，再次添加对象，

对象中包含1.path（path如果不传参可以随便起个名字）

                    path的用途：path中的新名字会添加到routerlink标签 中to键的值中

                                         <router-link to="/新名字"></router-link> 

                   2.redirect属性 该属性是目标页面的地址（说白了就是以前定义home页面的path home的path和重定义的redirect都是同一个path 毕竟都是回到同一个页面）

我们现在index.js文件中操作

1.只返回页面：

第22行开始自己随便定义一个path，然后再redirect中写入目标页面的path。

如上图中22-25行是重定义了一个路由，让该路由回到主页面

path中随便写一个（）相当于给新路由起个名字 path：‘/新名字’  但是redirect必须写和上面14行中一样的path （个人认为重定义就是建立一个新的路由，只是给新路由重起一个名字，但本质的目标path不变 好比于生活中把西红柿又叫番茄一样 本质都是那一个蔬菜）

2.不仅返回页面还要传参

如果要在重定义的路由中传参的话，path不能随便起名了，path中必须是 “/新名字/参数”

 path: '/goparams/:newsId/:newsTitle',  这个path中的新名字就是 goparams

后面的/:newsId/:newsTitle就是参数

新路由的另一个属性redirect还是传入目标路由的path

3.重定义的路由最终都要在App.vue文件中通过<router-link>加载

 二、alias别名

    {
      path: '/Hi1',
      component: Hi1,
      alias:'/Hi1clone'
    },

alias后面直接写新起的名字，然后在App.vue中的<router-link>中取引用

 <router-link to="/Hi1clone">Hi1clone</router-link>|

redirect和alias的区别

redirect：直接改变了url的值，把url变成了真实的path路径。

      这是没有重定义的路由url  

     

      这是重定义的路由url

     

alias：url路径没有别改变，这种更友好，让用户知道自己访问的路径，只是改变了<router-view>中的内容。

还有一点 有很多博客说在 '/' 根路径的路由中不能起别用 因为这样路由中的router-view区域没有任何内容 但是现在版本的vue中已经把这个bug改了可以给根目录起别名