router 子路由导航

路由嵌套

/user/foo/profile                     /user/foo/posts
+------------------+                  +-----------------+
| User             |                  | User            |
| +--------------+ |                  | +-------------+ |
| | Profile      | |  +------------>  | | Posts       | |
| |              | |                  | |             | |
| +--------------+ |                  | +-------------+ |
+------------------+                  +-----------------+

<div class="user">
  <h2>User</h2>
  <router-view></router-view>
</div>

routes: [
  {
    path: "/user/:id",
    component: User,
    children: [
      // 当 /user/:id 匹配成功，
      // UserHome 会被渲染在 User 的 <router-view> 中
      { path: "/profile", component: Profile },
      { path: "/Posts", component: Posts }
      // ...其他子路由
    ]
  }
];

route 和 router 的理解

• $router : 是路由操作对象

• $route : 是路由信息对象

如果要在刷新页面的时候通过路由的信息来操作数据，可以在 created 下使用 this.$route 这个的属性

this.$route 存着一些与路由相关的信息常用的:

• parmas 预设的变量
• path 当前的路由的路径
• query 查询信息 ?号
• hash hash 信息 #号

// 操作 路由跳转
this.$router.push({
  name: "hello",
  params: {
    name: "word",
    age: "11"
  }
});
this.$router.push({
  path: "hello",
  query: {
    name: "word",
    age: "11"
  }
});

读取 路由参数接收

this.name = this.$route.params.name;
this.age = this.$route.params.age;
// or
this.name = this.$route.query.name;
this.name = this.$route.query.age;