8-动态路由

动态路由

1、知识点

在网页中，用户进行多模块或多页面需要进行交互时，从这个页面到另外一个页面都需要通过链接跳转，所以路由就应运而生了。

• 实例工厂 getCurrentInstance()
• 创建路由函数 createRouter()
• 添加路由 router.addRoute()
• 路由判断 router.hasRoute()
• 获取路由 router.getRoutes()
• 移除路由 router.removeRoute()

2、实例工厂 getCurrentInstance()

我们来看看，到底这个实例方法都隐藏着些什么？

为了测试，在页面给定一个按钮，绑定点击事件，拿到实例化对象的 ctx 上下文对象。

在 src/views 新建 TestRoute.vue：

<template>
  <div ref="root">
    <button @click="click">click</button>
    <button @click="toHome">toHome</button>
    <button @click="toAbout">toAbout</button>
  </div>
</template>

<script>
  import { getCurrentInstance, ref } from "vue";
  import { createRouter, createWebHistory } from "vue-router";
  import OtherRoute from "./OtherRoute.vue";
  export default {
    name: "TestRoute",
    props: {
      test: {
        type: String,
        default: "test",
      },
    },
    data() {
      return {
        msg: "hello",
      };
    },
    setup() {
      let { ctx } = getCurrentInstance();
      let root = ref(null);
      let routes = [
        {
          path: "/",
          name: "Home",
          component: import(/* webpackChunkName: "about" */ "./Home.vue"),
        },
        {
          path: "/about",
          name: "About",
          component: import(/* webpackChunkName: "about" */ "./About.vue"),
        },
      ];
      let router = createRouter({
        history: createWebHistory(process.env.BASE_URL),
        routes,
      });
      let removeRoute = router.addRoute({
        path: "/otherroute",
        name: "OtherRoute",
        component: OtherRoute,
      });
      let isHasRoute = router.hasRoute("OtherRoute");
      let route = router.getRoutes();
      router.removeRoute("OtherRoute");
      let isRemove = router.hasRoute("OtherRoute");
      route = router.getRoutes();
      let click = () => {
        console.log(ctx);
        console.log(ctx);
        console.log(ctx.$attrs);
        console.log(ctx.$data);
        console.log(ctx.$props);
        console.log(ctx.$el);
        console.log(ctx.$options);
        console.log(ctx.$refs);
        console.log(ctx.$root);
        console.log(ctx.$router);
        console.log(ctx.$slots);
        console.log(ctx.$store);
        console.log(ctx.$toast);
        console.log(ctx.$watch);
      };
      let toHome = () => {};
      let toAbout = () => {};
      return {
        click,
        toHome,
        toAbout,
        root,
      };
    },
  };
</script>

此时我们点击一下 click 按钮，在浏览器控制台会打印出一个对象：

ctx 调用方法

我们可以通过 ctx 访问三个按钮的事件：

• ctx.click()
• ctx.toHome()
• ctx.toAbout()

ctx.$attrs

$attrs 包含父范围属性绑定和未识别（提取）为组件 prop 或自定义事件的事件。当组件没有任何已声明的 prop 或自定义事件时，它实质上包含所有父作用域绑定，在创建高阶组件时很有用。

$data 组件实例正在观察的数据对象。组件实例代理对其数据对象上属性的访问。

• console.log(ctx.$data)

ctx.$props

$props 表示组件已接收到的当前 props 的对象。组件实例代理访问其 props 对象上的属性。

• console.log(ctx.$props)

ctx.$el

$el 组件实例正在管理的根 DOM 元素。

• console.log(ctx.$el)

ctx.$options

$options 用于当前组件实例的实例化选项。当您要在选项中包括自定义属性时，这很有用。

• console.log(ctx.$options)

ctx.$refs

$refs DOM 元素和组件实例的对象，已向 refattribute 注册。

• console.log(ctx.$refs)

ctx.$root

$root 当前组件树的根组件实例。如果当前实例没有父代，则此值为自身。

• console.log(ctx.$root)

ctx.$router

$router 存储路由对象的方法，属性。

• console.log(ctx.$router)

ctx.$slots

$slots 存储插槽对象。

• console.log(ctx.$slots)

ctx.$store

$store 存储 vuex 仓库管理操作方法，属性。

• console.log(ctx.$store)

ctx.$watch

$watch 监听器

• console.log(ctx.$watch)

3、创建路由函数 createRouter()

首先我们在 src/views/TestRoute.vue 引入 createRouter，createHistory。

import { createRouter, createWebHistory } from "vue-router";

接着我们在 setup 方法定义 routes，并创建路由对象 router。

setup() {
    let routes = [{
        path: "/",
        name: "Home",
        component: import( /* webpackChunkName: "about" */ './Home.vue')
    }, {
        path: '/about',
        name: 'About',
        component: import( /* webpackChunkName: "about" */ './About.vue')
    }];
    let router = createRouter({
        history: createWebHistory(process.env.BASE_URL),
        routes
    })
    let click = () => {
        console.log('router===>', router)
    };
    return {
        click
    }
}

然后我们点击 click 按钮，可以看到：

4、添加路由 router.addRoute()

我们在 src/views 新建 OtherRoute.vue：

<template>
  <div>这是新增的路由</div>
</template>

<script>
  export default {
    name: "OtherRoute",
  };
</script>

接着我们在 src/views/TestRoute.vue 导入上面 OtherRoute.vue。

import OtherRoute from "./OtherRoute.vue";

然后我们给上文提到的 router 对象添加一个 /otherroute 路由，其路由名称为 OtherRoute，对应的组件 OtherRoute.vue。

router.addRoute(routes, {
  path: "/otherroute",
  name: "OtherRoute",
  component: OtherRoute,
});

5、路由判断 router.hasRoute()

我们可以使用 hasRoute 方法来判断我们上面添加路由是否成功。

let isHasRoute = router.hasRoute("OtherRoute");

打印 isHasRoute。

console.log("router===>", isHasRoute);

6、获取路由 router.getRoutes()

首先我们在 setup(){} 内定义 route：

let route = router.getRoutes();

打印 route：

console.log("router===>", route);

7、移除路由 router.removeRoute()

有了添加路由，判断路由，路由获取，当然会有路由移除。

• 先移除路由
• 判断是否存在
• 打印所有路由

我们在 setup(){} 方法中写下如下代码：

router.removeRoute("OtherRoute");
let isRemove = router.hasRoute("OtherRoute");
route = route.getRoutes();

然后在 click 方法打印出 isRemove：

console.log("remove route===>", isRemove);
console.log("router===>", route);

效果如下：

8、总结

学习以下几点知识：

• 如何拿到实例对象的上下文 ctx。
• 使用 createRoute 方法创建路由。
• 学会路由的增删改，以及判断路由是否存在。