Vue中嵌套路由以及路由元-Vue-前端日记簿

首页 Vue 正文

Vue中嵌套路由以及路由元

2023-08-06 88

嵌套路由以及路由元：

使用 vue Router路由管理器，显示组件，并且显示的组件中还有新的子级路由链接以及内容。 children数组表示子路由规则

路由嵌套案例：

其完整代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 1.先引入vue -->
    <script src="../index.vue/vue.js"></script>
    <!-- 2.再引入vue-router -->
    <script src="../index.vue/vue-router.js"></script>
  </head>
  <body>
    <!-- 被 vm 实例所控制的区域 -->
    <div id="app">
      <router-link to="/index">首页</router-link>
      <router-link to="/news">新闻中心</router-link>
      <!-- 路由占位符 -->
      <router-view></router-view>
    </div>

    <template id="index">
      <div>
        <h1>首页</h1>
      </div>
    </template>

    <template id="news">
      <div>
        <h1>新闻中心</h1>
        <div>
          <!-- 子路由链接 -->
          <router-link to="/news/one">公司新闻</router-link>
          <router-link to="/news/two">行业新闻</router-link>
          <!-- 子路由的占位符 -->
          <router-view />
        </div>
      </div>
    </template>

    <template id="one">
      <div>
        <h1>公司新闻</h1>
      </div>
    </template>

    <template id="two">
      <div>
        <h1>行业新闻</h1>
      </div>
    </template>

    <script>
      // 首页组件
      const Index = {
        template: "#index",
      };
      // 新闻组件
      const News = {
        template: "#news",
      };
      // one组件
      const One = {
        template: "#one",
      };
      // two组件
      const Two = {
        template: "#two",
      };

      // 配置路由规则并创建路由实例
      Vue.use(VueRouter);
      let router = new VueRouter({
        // routes是路由规则数组
        routes: [
          // 每一个路由规则都是一个对象，对象中至少包含path和component两个属性
          {
            path: "/index",
            component: Index,
          },
          {
            path: "/news",
            component: News,
            // 嵌套路由（子路由）
            // children数组 表示 子路由规则
            children: [
              {
                // path:'/news/one',
                path: "one",
                component: One,
              },
              {
                // path:'/news/two',
                path: "two",
                component: Two,
              },
            ],
          },
        ],
      });
      // 根组件
      // 将路由挂载到Vue实例中
      let vm = new Vue({
        el: "#app",
        data: {},
        // 通过router属性挂载路由对象
        // router:router,
        router,
        methods: {},
        components: {
          Index,
          News,
          One,
          Two,
        },
      });
    </script>
  </body>
</html>

当我们想要在路由上添加信息可以使用meta来书写在这个对象里我们可以写若干个属性

$route 路由信息对象,只读对象 $router 路由操作对象,只写对象

       meta: {
          title: "首页",
          icon: "大风车",
          requiresAuth: true, //只有经过身份验证的用户才能创建帖子
        },

通过这样的书写方式就可以将数据显示在视图层当中在路由钩子中则充当着改变网页标题更改用户权鉴

标签：

发表评论：取消回复

原文链接：http://1.15.94.33/?id=38

=========================================

http://1.15.94.33/ 为 “前端日记簿” 唯一官方服务平台，请勿相信其他任何渠道。