复习vue(14)路由2「这是我参与2022首次更文挑战的第28天，活动详情查看：2022首次更文挑战」。嵌套路由我

「这是我参与2022首次更文挑战的第28天，活动详情查看：2022首次更文挑战」。

嵌套路由

我们经常见到,从当前页面还可以跳转到当前页面的子页面,如:
- 当前页面的路由 /detail
- profil 子页面路由: /detail/profile
- about 子页面: /detail/about
此时我们称 profile 和 about 是 detail 的嵌套路由或者子路由;

如何实现嵌套路由

在路由映射表中配置 children 属性, children 就是子级路由,嵌套路由的意思;

示例代码:

let routes = [
		{
			path: '/',
			component: home
		},
		{
			// 一级路由必须带 /
			path: '/home',
			component: home
		},
		{
			path: '/detail',
			component: detail,
			children: [
				{
					// 子路由不带 / 如果加上 / 就是一级路由了
					// 写在 /detail 的 children 中，就是 /detail/profile 的意思
					path: 'profile',
					component: profile
				},
				{
					path: 'about',
					component: about
				}
			]
		}
	];

示例代码:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>

<body>

  <div id="app">

    <!--如果没有 / 会默认在后面拼上当前的路径，需要回到根路径上，给路径加上 /-->

    <router-link to="/home">首页</router-link>
    <router-link to="/detail">详情页</router-link>

    <router-view></router-view>
  </div>

  <template id="detail">
    <div>
      <!--profile 和 about 是 detail 的子路由-->
      <router-link to="/detail/profile">个人中心</router-link>
      <router-link to="/detail/about">关于我们</router-link>
      <router-view></router-view>
      <!--/detail 的子路由需要一个 router-view 渲染 -->
    </div>
  </template>

  <script src="vue.js"></script>
  <script src="https://unpkg.com/vue-router@3.0.0/dist/vue-router.js"></script>

  <script>
    // 创建组件
    let home = {
      template: `<div>首页</div>`
    };
    let detail = {
      template: `#detail`
    };
    let profile = {
      template: `<div>个人中心</div>`
    };
    let about = {
      template: `<div>关于我们</div>`
    };

    // 2. 配置路由表
    let routes = [
      {
        path: '/',
        component: home
      },
      {
        // 一级路由必须带 /
        path: '/home',
        component: home
      },
      {
        path: '/detail',
        component: detail,
        children: [
          {
            // 子路由不带 / 如果加上 / 就是一级路由了
            // 写在 /detail 的 children 中，就是 /detail/profile 的意思
            path: 'profile',
            component: profile
          },
          {
            path: 'about',
            component: about
          }
        ]
      }
    ];

    let router = new VueRouter({
      routes
    });

    let vm = new Vue({
      el: '#app',
      data: {},
      router
    });
  </script>
</body>

</html>

路由参数

动态路由
- vue-router 的路由可以像 Node.js 的动态路由一样,可以配置动态路由;例如/text/:id/:a 此时id 和a 就是动态的路由;而我们真正访问路由时,如/text/12/13 此时的12和13 就是称为动态路由的参数;
如何获取动态路由的参数
- this.$route.params

示例代码:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>

<body>
  <div id="app">
    <router-link to="/articles/1/a?name=mabin&age=18">文章1</router-link>
    <router-link to="/articles/2/b">文章2</router-link>
    <router-link to="/articles/3/c">文章3</router-link>
    <button @click="go">走你</button>

    <router-view></router-view>
  </div>

  <script src="vue.js"></script>
  <script src="https://unpkg.com/vue-router@3.0.0/dist/vue-router.js"></script>



  <script>
    let articles = {
      created() {
        console.log(this.$route);
        // this.$route.params 存储了当前动态路由的参数
        console.log(this.$router);
      },
      name: 'articles',
      template: `<div>第{{$route.params.id}}</div>`
    };

    let routes = [
      {
        name: 'articles',
        path: '/articles/:id/:txt',
        component: articles
      }
    ];

    let router = new VueRouter({
      routes
    });

    let vm = new Vue({
      el: '#app',
      data: {},
      router,
      methods: {
        go() {
          this.$router.push({
            name: 'articles',
            params: {
              txt: 'x',
              id: 6
            },
            query: {
              name: 'zhangsan',
              age: 18
            }
          })
        }
      }
    })
  </script>
</body>

</html>