嵌套路由

嵌套路由

认识嵌套路由

• 嵌套路由是一个很常见的功能

  • 比如在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
      

$route和$router的区别

• $router为VueRouter实例，想要导航到不同URL，则使用$router.push方法
• $route为当前router跳转对象里面可以获取name、path、query、params等