vue学习笔记（路由动态匹配和嵌套）

1.动态路由匹配

1.在路由数组中(index.js)，添加路由映射和组件(User,跳转的页面vue)

import  User from '../components/user.vue'

{ //可以用正则表达式
                path: '/user/:id(\\d+)*', 
                component: User 
  },

2.在主页面(router.vue)添加路由跳转，路径参数不同，但会跳转到相同的vue组件，User

<router-link to="/user/1">1号用户</router-link>|
 <router-link to="/user/2">2号用户</router-link>|
 <router-link to="/user/3/4/5/">数组用户</router-link>|

3.新增跳转的组件User，user.vue中的代码

<template>
    My id is{{ $route.params.id }};
</template>

4.问题

①不识别，去掉*可以路由匹配中，多个参数，其中有参数为数组如何实现

path: '/user/:id(\\d+)*/name/:username'

②export default中name属性的作用 百度

2.嵌套路由

1.在路由匹配表中需要嵌套的页面添加children

注意，以 / 开头的嵌套路径将被视为根路径。这允许你利用组件嵌套，而不必使用嵌套的 URL，且path参数可以为空，在没有匹配到嵌套路由的时候，渲染一些东西

import  UserProfile from '../components/UserProfile.vue'
import  UserPosts from '../components/UserPosts.vue'
               
               
               path: '/user/:id(\\d+)/name/:username', 
                component: User ,
                children: [
                {
                    // 当 /user/:id/profile 匹配成功
                    // UserProfile 将被渲染到 User 的 <router-view> 内部
                    path: 'profile',
                    component: UserProfile,
                },
                {
                    // 当 /user/:id/posts 匹配成功
                    // UserPosts 将被渲染到 User 的 <router-view> 内部
                    path: 'posts',
                    component: UserPosts,
                },
                ],
            },

2.在第一层路由的vue里添加路由跳转

<p>  
        <router-link :to= "'/user/'+ $route.params.id+'/name/'+ $route.params.username+'/profile'">头像</router-link>|
        <router-link :to="'/user/'+ $route.params.id+ '/name/'+$route.params.username+'/posts'">岗位</router-link> 
          </p>
          <!-- 路由出口 -->
          <!-- 路由匹配到的组件将渲染在这里 -->
          <router-view></router-view>  <!--使用 router-link 组件进行导航 -->

3.添加两个新组件

<template>
    This is {{ $route.params.username }} gangwei 
</template>

<template>
    This is {{ $route.params.username }} touxiang
</template>

总结：

路由动态分配：通过某个指定的路径参数达到多个路径映射到同一个组件

修改注意点：

①路由数组中 路由路径path属性使用参数方式赋值，则只需要新增一个元素

②主页面中通过设置不同的参数路径来跳转到相同页面的，一个以上的跳转，路由参数不同

③新增上述不同参数路径映射到的相同子页面(即组件，一个)，子页面中可以使用路径参数区别进行不同的渲染

嵌套路由：在上述的子页面中再添加一层路由，达到二次跳转

修改注意点:

①路由数组中在需要嵌套的路由元素中添加子路由数组,一个以上的元素

②在一层路由的页面中添加子路由的跳转(一层路由的跳转在主页面上)，一个以上的跳转和①中添加的数量一致

③在组件中添加子路由中路径关联的组件，一个以上的和①中添加的数量一致

3.嵌套路由和动态匹配结合

{ 
                path: '/user/:id(\\d+)/name/:username', 
                component: User ,
                children: [
                
                {
                    path:'userinfo/:infodes',
                    component:UserInfos,
                },
                ],
            },

主页面

<router-link to="/user/1/name/admin">admin</router-link>|
<router-link to="/user/2/name/tourist">tourist</router-link> 
 <router-view></router-view> 

组件(主页面跳转后的子页面)中添加

 <router-link :to="'/user/'+ $route.params.id+ '/name/'+$route.params.username+'/userinfo/profile'">员工头像信息</router-link> |
  <router-link :to="'/user/'+ $route.params.id+ '/name/'+$route.params.username+'/userinfo/posts'">员工岗位信息</router-link> 
     <router-view></router-view> 

组件(子页面再跳转后的子子页面)

<template>
    this is {{ $route.params.username }} {{ $route.params.infodes }}.
</template>