VueJs(11)---vue-router（命名路由，命名视图，重定向别名，路由组件传参）

vue-router

    

      上篇文章讲了第一篇vue-router相关文章，文章地址：VueJs(10)---vue-router（进阶1）

     一、命名路由

       有时候，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。你可以在创建 Router 实例的时候，在 routes 配置中给某个路由设置名称。我个人理解就相当于给路径取个名字，调用的时候，这个名字就指这个路径，不然有些路径很长，直接写太麻烦。

const router = new VueRouter({
  routes: [
    {
      path: '/user/:userId',
      name: 'user',
      component: User
    }
  ]
})

    要链接到一个命名路由，可以给 router-link 的 to 属性传一个对象：

<router-link :to="{ name: 'user', params: { userId: 123 }}">Userrouter-link>

   这跟代码调用 router.push() 是一回事：

router.push({ name: 'user', params: { userId: 123 }})

   这两种方式都会把路由导航到 /user/123 路径。

 

      二、命名视图

     1、命名视图

        命名视图只需两步：第一在router-view添加name属性，第二在路由中用components。

       有时候想同时（同级）展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar（侧导航） 和 main（主内容） 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default。

<router-view class="view one">router-view>
<router-view class="view two" name="a">router-view>
<router-view class="view three" name="b">router-view>

一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。确保正确使用 components 配置（带上 s）：

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

举例

<script src="https://unpkg.com/vue/dist/vue.js">script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js">script>

<div id="app">
    <h1>Named Viewsh1>
    <ul>
        <li>
            <router-link to="/">/router-link>
        li>
        <li>
            <router-link to="/other">/otherrouter-link>
        li>
    ul>
    <router-view class="view one">router-view>
    <router-view class="view two" name="a">router-view>
    <router-view class="view three" name="b">router-view>
div>
<script>
    const Foo = {
        template: '
foo'
    }
    const Bar = {
        template: '
bar'
    }
    const Baz = {
        template: '
baz'
    }

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

    new Vue({
        router,
        el: '#app'
    })
script>

 效果：

 

2、嵌套命名视图

    我们也有可能使用命名视图创建嵌套视图的复杂布局。这时你也需要命名用到的嵌套 router-view 组件。我们以一个设置面板为例：

  

• Nav 只是一个常规组件。
• UserSettings 是一个视图组件。
• UserEmailsSubscriptions、UserProfile、UserProfilePreview 是嵌套的视图组件。

 UserSettings 组件的