vue路由——基础篇（四）

上一篇内容我们主要了解了嵌套路由等知识，这篇博客继续讲解路由的知识点，主要讲解命名路由、命名视图、重定向和别名的用法。

命名路由

Router 构建选项里的映射配置，其中有一项是name，就是给这个路由取了一个名字。

 {
        path: '/books',
        component: Books,
        name: 'books',
        children: [{
            path: 'book/:id',
            name: 'book',
            component: Book,
        }]
    }

我们在路由配置中添加了 name属性，然后我们修改组件中的代码

 <router-link :to="{name:'books'}">图书</router-link>|

我们给to传一个对象，对象中的name就对应了路由配置中的name选项，当如果使用使用命名路由，就必须使用这种:to="{name:'books'}方式。

在router-link的to属性传递对象时，对象除了有name选项，还可以添加params选项，这个选项用于传递参数。

<router-link :to="{name:'book',params:{id:1}}">百年孤独</router-link>

当然对象中除了这两个属性，还可以添加其他选项，具体选项可以参考 ** 路由对象中的属性 **。

路由别名

在构建选项中除了name选项，还有一个alias选项，这个选项是路由别名

    {
        path: '/books',
        alias: '/boooks',
        component: Books,
    },

/books的别名是boooks，当用户访问/boooks时，URL保持/boooks，但路由匹配到的是/books。这个就是路由别名，路由别名的功能能让你可以自由地将UI结构映射到任意的URL。

路由重定向

上面讲解了路由命名和路由别名，那么我们继续了解一下路由重定向，重定向是使用redirect选项，看下列具体配置方式：

//第一种
{
        path: '/',
        component: Index,
        redirect: {
            name: "books"
        }
    }


//第二种
{
        path: '/',
        component: Index,
        redirect: '/books'
    }

这两种方式传递的参数所代表的含义不相同，第一种方式传递的是路由命名，这种方式类似于** 路由命名的 to 属性传参**；第二种方式传递的参数URL地址

注意命名路由和路由别名的区别，一个是将命名路由，增加访问到路由的方式；一种是将访问到路由转到另外的路由去。两者之间存在很大的区别。

命名视图

什么是视图？<router-view>组件就是渲染路径匹配到的视图组件。如果想同时显示多个组件，而不是嵌套展示，那么我们就要使用到命名视图。

那什么是命名视图？顾名思义就是给<router-view>组件加上一个名字，即加上name属性，如下所示：

<router-view></router-view>
<router-view name="a"></router-view>
<router-view name="b"></router-view>

没有设置name属性的视图默认为default。一个视图使用一个组件渲染，那么多视图需要多个组件来渲染。在配置路由的时候，我们可以添加components选项，如下所示：

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    }
  ]
})