Vue系列入门教程(12)——vue-router路由之嵌套路由、命名视图、别名和组件传参

Web前端 潘老师 2个月前 (09-08) 401 ℃ (2) 扫码查看

1、本文接着之前文章的案例继续:
Vue系列入门教程(10)——vue-router路由之入门案例、命名路由和动态路由
Vue系列入门教程(11)——vue-router路由之编程式导航

2、实际生活中的应用界面,通常由多层嵌套的组件组合而成。同样地,URL 中各段动态路径也按某种结构对应嵌套的各层组件,例如:
Vue系列入门教程(12)——vue-router路由之嵌套路由、命名视图、别名和组件传参
借助 vue-router,使用嵌套路由配置,就可以很简单地表达这种关系。

3、案例实现:
1)在之前的项目中,App.vue中的router-view是最顶层的出口,渲染最高级路由匹配到的组件。同样地,一个被渲染组件同样可以包含自己的嵌套 router-view。例如,在 User.vue 组件的模板添加一个 router-view,修改User.vuetemplate如下:

<template>
    <div>
        <h1>欢迎 {{ $route.params.username }} 用户回来!</h1> 
        <router-view></router-view>
    </div>
</template>

2)在views中新建UserProfile.vueUserPosts.vue组件:
a)UserProfile.vue代码:

<template>
    <div>
        UserProfile-用户资料
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style scoped>

</style>

b)UserPosts.vue代码:

<template>
    <div>
        UserPosts-用户文章
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style scoped>

</style>

3)要在嵌套的出口中渲染组件,需要在 VueRouter 的参数中使用 children 配置,修改config.jsnameUser的路由如下:

{ 
    path: '/user/:username', 
    name:'User',
    component:()=>import('@/views/User.vue'),
    // 配置User下嵌套路由
    children:[
        {
            // 当 /user/:username/profile 匹配成功,
            // UserProfile 会被渲染在 User 的 <router-view> 中
            path: 'profile',
            component:() =>import('@/views/UserProfile.vue')
        },
        {
            // 当 /user/:username/posts 匹配成功,
            // UserPosts 会被渲染在 User 的 <router-view> 中
            path: 'posts',
            component:() =>import('@/views/UserPosts.vue')
        }
    ]
}

注意:以/ 开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径

4)浏览器直接访问地址http://localhost:8080/user/xiaoming/profile:
Vue系列入门教程(12)——vue-router路由之嵌套路由、命名视图、别名和组件传参
浏览器直接访问地址http://localhost:8080/user/xiaoming/posts:
Vue系列入门教程(12)——vue-router路由之嵌套路由、命名视图、别名和组件传参

5)你会发现,children 配置就是像 routes 配置一样的路由配置数组,所以呢,你可以嵌套多层路由。

此时,基于上面的配置,当你访问 /user/xiaoming 时,User.vue中的router-view 出口是不会渲染任何东西,这是因为没有匹配到合适的子路由。如果你想要渲染点什么,可以提供一个 空的子路由:

{ 
    path: '/user/:username', 
    name:'User',
    component:()=>import('@/views/User.vue'),
    // 配置User下嵌套路由
    children:[
        // 当 /user/:username 匹配成功,
        // Blog 会被渲染在 User 的 <router-view> 中
        { 
            path: '', 
            component:()=>import('@/views/Blog.vue')
        }
        // 其他子路由
    ]
}

浏览器直接访问http://localhost:8080/user/xiaoming:
Vue系列入门教程(12)——vue-router路由之嵌套路由、命名视图、别名和组件传参

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

2、修改App.vuetemplate如下:

<template>
  <div id="app">
    <!-- 头部 -->
    <Header/>
    <!-- 中间内容区域 -->
    <div class="container">
        <!-- 该组件会根据不同的访问路径,渲染不同的组件 -->
        <!-- 没有命名,默认default -->
        <router-view></router-view>
        <!-- 命名为a -->
        <router-view name="a"></router-view>
        <!-- 命名为b -->
        <router-view name="b"></router-view>
    </div>    
    <!-- 底部 -->
    <Footer/>
  </div>
</template>

3、一个视图使用一个组件渲染,因此对于同个路由,多个视图就需要多个组件。我们修改config.jsnameHome的路由配置如下:

注意:这里的属性不再是component,而是 components

{
    path:"/",
    name:"Home",
    components:{
        default:()=>import('@/views/Home.vue'),
        a:()=>import('@/views/Blog.vue'),
        b:()=>import('@/views/About.vue')
    }
}

4、测试访问:
Vue系列入门教程(12)——vue-router路由之嵌套路由、命名视图、别名和组件传参

1、我们也有可能使用命名视图创建嵌套视图的复杂布局。这时你也需要命名用到的嵌套 router-view 组件。我们以一个设置面板为例:
Vue系列入门教程(12)——vue-router路由之嵌套路由、命名视图、别名和组件传参

  • Nav 只是一个常规组件。
  • UserSettings 是一个视图组件。
  • UserEmailsSubscriptionsUserProfileUserProfilePreview 是嵌套的视图组件。

注意:我们先忽略 HTML/CSS 具体的布局的样子,只专注在用到的组件上。

2、在views中新建Nav.vueUserSettings.vueUserEmailsSubscriptions.vueUserProfile.vue(已有)、UserProfilePreview.vue
1)Nav.vue

<template>
    <div>
        Nav组件
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style scoped>

</style>

2)UserEmailsSubscriptions.vue

<template>
    <div>
        UserEmailsSubscriptions组件
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style scoped>

</style>

3)UserProfile.vue(已有则修改)

<template>
    <div>
        UserProfile组件
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style scoped>

</style>

4)UserProfilePreview.vue

<template>
    <div>
        UserProfilePreview组件
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style scoped>

</style>

5)UserSettings.vue

<template>
    <div>
        <h1>UserSettings组件</h1>
        <Nav/>
        <router-view/>
        <router-view name="helper"/>
    </div>
</template>

<script>
    // 同级目录
    import Nav from './Nav.vue'
    export default {
        
    }
</script>

<style scoped>

</style>

3、在configs.js下新增路由配置如下:

{
    path: '/settings', 
    name:'Settings',
    //在App.vue的默认视图下
    component:()=>import('@/views/UserSettings.vue'),
    children:[
        {
            path:"emails",
            component:()=>import('@/views/UserEmailsSubscriptions.vue')
        },
        {
            path:"profile",
            components:{
                default:()=>import('@/views/UserProfile.vue'),
                helper:()=>import('@/views/UserProfilePreview.vue')
            }
        }
    ]
    
}

4、浏览器直接访问http://localhost:8080/settings/emails:
Vue系列入门教程(12)——vue-router路由之嵌套路由、命名视图、别名和组件传参
浏览器直接访问http://localhost:8080/settings/profile:
Vue系列入门教程(12)——vue-router路由之嵌套路由、命名视图、别名和组件传参

1、重定向也是通过 routes 配置来完成
2、案例:从 /about 重定向到 /blog
1)修改config.jsnameAbout的路由配置如下:

{
    path:"/about",
    name:"About",
    // 重定向指定路由地址
    redirect:'/blog'
}

2)测试:
Vue系列入门教程(12)——vue-router路由之嵌套路由、命名视图、别名和组件传参
3、重定向的目标也可以是一个命名的路由
案例:从 /about 重定向到 /blog
1)修改config.jsnameAbout的路由配置如下:

{
    path:"/about",
    name:"About",
    // 重定向指定命名路由
    redirect:{name:'Blog'}
}

2)测试效果一样

4、甚至是一个方法,动态返回重定向目标
案例:从 /about 重定向到 /blog
1)修改config.jsnameAbout的路由配置如下:

{
    path:"/about",
    name:"About",
    // 使用方法重定向
    redirect:to=>{
        // 方法接收 目标路由 作为参数
        // return 重定向的 字符串路径/路径对象
        return '/blog';
        // 或路径对象
        // return {name:'Blog'};
    }
}

2)测试效果一样

1、“重定向”的意思是,当用户访问 /a时,URL 将会被替换成 /b,然后匹配路由为 /b,那么“别名”又是什么呢?
/a 的别名是 /b,意味着,当用户访问 /b 时,URL 会保持为 /b,但是路由匹配则为 /a,就像用户访问 /a 一样。

上面对应的路由配置为:

 { path: '/a', component: A, alias: '/b' }

2、我们修改config.js,给nameBlog的路由配置起个别名为/b,修改配置如下:

{
    path:"/blog",
    name:"Blog",
    component:()=>import('@/views/Blog.vue'),
    // 使用alias起别名
    alias:'/b'
}

测试浏览器访问http://localhost:8080/b:
Vue系列入门教程(12)——vue-router路由之嵌套路由、命名视图、别名和组件传参

1、在组件中使用 $route获取参数会使之与其对应路由形成高度耦合,从而使组件只能在某些特定的 URL 上使用,限制了其灵活性。我们可以使用 props 将组件和路由解耦,在讲组件时我们已经讲过了组件的props属性,不过当时props中属性的数据是从组件标签中通过属性绑定传过来,而现在我们是通过路由传过来对应的数据,我们称之为路由组件传参。

2、路由组件传参的3种方式:

  • 布尔模式
  • 对象模式
  • 函数模式

a)布尔模式-多用于动态路由
如果路由配置中props 被设置为 trueroute.params 将会被设置为组件属性。
1)修改User.vue组件如下:

<template>
    <div>
        <h1>欢迎 {{ username }} 用户回来!</h1>
    </div>
</template>

<script>
    export default {
        // 接受参数属性
        props:["username"]
    }
</script>

<style scoped>

</style>

2)修改config.jsnameUser的路由配置如下:

{ 
    path: '/user/:username', 
    name:'User',
    component:()=>import('@/views/User.vue'),
    // props被设置为true,route.params将会被设置为组件属性
    props:true
}

3)运行测试:
Vue系列入门教程(12)——vue-router路由之嵌套路由、命名视图、别名和组件传参
对于包含命名视图的路由,你必须分别为每个命名视图添加props选项:
1)修改App.vuetemplate如下:

<template>
  <div id="app">
    <!-- 头部 -->
    <Header/>
    <!-- 中间内容区域 -->
    <div class="container">
        <!-- 该组件会根据不同的访问路径,渲染不同的组件 -->
        <!-- 默认 -->
        <router-view></router-view>
        <!-- 命名为a -->
        <router-view name="a"></router-view>
    </div>    
    <!-- 底部 -->
    <Footer/>
  </div>
</template>

2)修改config.jsnameUser的路由配置如下:

{ 
    path: '/user/:username', 
    name:'User',
    components:{
        default:()=>import('@/views/User.vue'),
        a:()=>import('@/views/Login.vue')
    },
    // 包含命名视图的路由,必须分别为每个命名视图添加props
    props:{default:true,a:true}
}

3)修改Login.vue如下:

<template>
    <div>
        欢迎 {{username}} 登录
    </div>
</template>

<script>
    export default {
        props:["username"]
    }
</script>

<style scoped>

</style>

4)运行测试:
Vue系列入门教程(12)——vue-router路由之嵌套路由、命名视图、别名和组件传参
b)对象模式——多用于静态路由
如果路由配置 props 是一个对象,它会被按原样设置为组件属性。当 props 是静态的时候有用。
1)修改config.jsnameUser的路由配置如下:

{ 
    path: '/user', 
    name:'User',
    component:()=>import('@/views/User.vue'),
    // // 路由配置 props 是一个对象,它会被按原样设置为组件属性,即这里传的是什么,组件上面接收的就会是什么
    props:{username:"小明",password:"123456"}
}

2)修改User.vue组件如下:

<template>
    <div>
        <h1>欢迎 {{ username }} 用户回来,您的密码是: {{password}}</h1> 
    </div>
</template>

<script>
    export default {
        // 接受参数属性
        props:["username","password"]
    }
</script>

<style scoped>

</style>

3)运行测试:
Vue系列入门教程(12)——vue-router路由之嵌套路由、命名视图、别名和组件传参

c)函数模式
你可以创建一个函数返回 props。这样你便可以将参数转换成另一种类型,将静态值与基于路由的值结合等等。
1)修改config.jsnameUser的路由配置如下:

{ 
    path: '/user/:username', 
    name:'User',
    component:()=>import('@/views/User.vue'),
    /* URL /user/小明?p=123456 会将 {username:'小明'}
    和{password: '123456'} 作为属性传递给 User.vue 组件 */
    props:(route)=>({
        // 第1个username匹配动态路中的参数,第2个username匹配User.vue中props属性名
        username:route.params.username,
        // password匹配User.vue中props属性名,p匹配请求地址?后参数名
        password:route.query.p
    })
}

2)User.vue仍然为:

<template>
    <div>
        <h1>欢迎 {{ username }} 用户回来,您的密码是: {{password}}</h1> 
    </div>
</template>

<script>
    export default {
        // 接受参数属性
        props:["username","password"]
    }
</script>

<style scoped>

</style>

3)运行测试:
Vue系列入门教程(12)——vue-router路由之嵌套路由、命名视图、别名和组件传参


版权声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系潘老师进行处理。
喜欢 (9)
请潘老师喝杯Coffee吧!】
分享 (0)
发表我的评论
取消评论
表情 贴图 签到 代码

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填【保密】)
  • 网址
(2)个小伙伴在吐槽
  1. 组件传参时,如果想要将静态props传给包含多个命名视图的路由,应该怎么写呢
    Que Sera Sera2020-09-15 19:17 回复
    • 潘老师
      props中写对象,并且针对每个命名视图都传值,类似如下代码:
      {
          path:'/user',
          components:{
              default:()=>import('@/views/UserProfile.vue'),
              a:()=>import('@/views/UserProfilePreview.vue'),
          },
          props:{default:{username:'小王'},a:{username:'小张'}}
      }
      潘老师2020-09-17 23:47 回复