嵌套路由

认识嵌套路由

嵌套路由是一个很常见的功能
- 比如在home页面中, 我们希望通过/home/news和/home/message访问一些内容
- 一个路径映射一个组件, 访问这两个路径也会分别渲染两个组件
路径和组件的关系如下:
实现嵌套路由有两个步骤:
- 创建对应的子组件, 并且在路由映射中配置对应的子路由.
- 在组件内部使用<router-view>标签

嵌套路由实现

我们假设已经配置好了路由，并有一个home.vue的组件和其它两个组件
现在我们在components创建两个组件
- homeNews.vue
- homeMessage.vue
在home映射关系下配置

const News = () => import('../components/homeNews') 
const Message = () => import('../components/homeMessage') 

{
        path:'/home',
        component: Home,
        children: [
            {
                path: 'message',//子路由不用加'/'
                component: Message
            },
            {
                path: 'news',
                component: News
            }
        ]
    }

在home.vue中使用

<router-link to="/home/news">消息</router-link>
<router-link to="/home/message">新闻</router-link>
<router-view></router-view>

嵌套默认路径

在children下配置映射关系

{
    path: '/',
    redirect:'message'
}

传递参数

传递递参数主要有两种类型: params和query
- params的类型:
  - 配置路由格式: /router/:id
```
{
path: '/user/:id',
component: User
}
```
  - 传递的方式: 在path后面跟上对应的值
    - userid="lazy"
```
<router-link :to="'/user/'+userid">用户</router-link>
```
  - 传递后形成的路径: /router/lazy
- query的类型:
  - 配置路由格式: /router, 也就是普通配置
  - 传递的方式: 对象中使用query的key作为传递方式
    - 传递参数方式一:<router-link>
```
<router-link :to="{path: '/profile',query:{name: 'lazy',age: '18'}}">档</     router-link>
```
    - 传递方式二:JavaScript代码,
```
this.$router.push({
    path: '/profile',
    query: {
        name: 'lazy',
        age: 18
    }
})
```
  - 传递后形成的路径: /router?id=123, /router?id=abc