url的传值，2级路由的配置，重定向，导航守卫，组合API

题目1：url的传值

图1：

题目2：2级路由的配置

1.index.js文件:

import { createRouter, createWebHistory } from 'vue-router'
import Index from '../views/Index.vue'
import Course from '../views/Course.vue'
import List from '../views/List.vue'
import User from '../views/User.vue'
import UserConfig from '../views/User/config.vue'
import UserInfo from '../views/User/info.vue'
const routes = [
  {
    path: '/',
    name: 'home',
    component: Index
  },
  {
    path: '/course',
    name: 'course',
    component: Course
  },
  {
    path: '/list',
    name: 'list',
    component: List
  },
  {
    path: '/user',
    name: 'user',
    component: User,
    children:[
      {
        // 路由地址配置，就是浏览器上的url
        path:'userconfig',
        // 页面的名称，自定义，但不要重复
        name:'userconfig',
        // 这个是页面文件的路径
        component:UserConfig
      },
      {
        path:'userinfo',
        name:'userinfo',
        component:UserInfo
      }
    ]
  }
]
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})
export default router

2.config.vue文件:

<template>
    <div style="color:red">这是用户配置页面</div>
</template>

3.info.vue文件:

<template>
    <div style="color:red">这是用户信息页面</div>
</template>

4.App.vue文件:

<template>
  <nav>
    <router-link to="/">首页</router-link> |
    <router-link to="/course">课程</router-link> |
    <router-link to="/list">列表</router-link> |
    <router-link to="/user?id=100">用户中心</router-link>
  </nav>
  <router-view/>
</template>
<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
nav {
  padding: 15px;
  a {
    font-weight: bold;
    color: #2c3e50;
    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>

5.浏览器效果图：

图1：

图2：

图3：

图4：

题目3：重定向

图1：

题目4：导航守卫

图1：示例1

图2：示例2

题目5：组合API

图1:setup方法的数据显示

图2:setup监听事件中方法

图3:setup的reactive与ref参数

图4:setup的watch侦听模块

图5:setup的watch侦听模块倒计时

图6:引入组件setup的传值