Vue学习笔记[14]-vue-router使用嵌套路由&传递路由参数

当前我们配置的路由都只有一层，要配置多层路由，需要用到嵌套路由。

 //index.js
const routes = [
//...
  {
    path:'/home',
    component: Home,
    children:[
      {
        path: 'news',
        component:HomeNews
      },
      {
        path: 'message',
        component: HomeMessage
      }
    ]
  },
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

参数传递

在跳转页面时，我们有时候会希望在不同页面之间传递一些数据。
传递参数有两种方式：params和query

1. params

传参数：

//app.js
 USER 

//...

//index.js
  {
  path: '/home/user/:userID'
  component: User
  }

取参数：

//user.vue

2. query

传参数：

• index.js

const routes = [ 
//... 
{
    path:'/user',
    component:User
  }
]

app.vue

• user.vue