嵌套路由与路由元信息

最新推荐文章于 2024-07-22 08:55:10 发布

卡夫卡的baby

最新推荐文章于 2024-07-22 08:55:10 发布

阅读量62

点赞数

分类专栏： vue.js 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_72303943/article/details/131045790

版权

vue.js 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

嵌套路由

一、什么是嵌套路由★★★★

嵌套路由概念

当我们使用 vue Router路由管理器，显示组件，并且显示的组件中还有新的子级路由链接以及内容。

children数组表示子路由规则
嵌套路由案例

二、路由元信息

如果你想要在路由上附加任意信息。我们将这些信息附加在meta属性上。meta是一个对象，对象里，可以自定义若干属性。

在路由列表中，每个路由都有一个 meta元数据字段，我们可以在这里配置一些自定义信息，供页面组件或路由钩子函数中使用。在路由跳转的时候，提供我们判断条件。

配置meta数据

在组件中获取 meta 数据

$route 路由信息对象,只读对象

$router 路由操作对象,只写对象

 // meta路由元信息
                    // 把任意信息 挂载到路由上 的meta属性里
                    meta:{
                        title:'首页',
                        icon:'大风车',
                        requiresAuth:true
                    }

总的代码：

<title>嵌套路由</title>
</head>
<body>

    <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>
            <!-- 在组建中 获取 元信息对象中的 数据 -->
            <h2 style="color:lightgreen">{{$route.meta.title}}</h2>
            <h2 style="color:lightgreen">{{$route.meta.icon}}</h2>
            <h2 style="color:lightgreen">{{$route.meta.requiresAuth}}</h2>
        </div>
    </template>

    <template id="news">
        <div>
            <h1>我是新闻中心组件</h1>
            <router-link to="/news/one">公司新闻</router-link>
            <router-link to="/news/two">行业新闻</router-link>
            <router-view></router-view>
        </div>
    </template>

    <template id="one">
        <div>
            <h1>我是公司新闻组件</h1>
        </div>
    </template>

    <template id="two">
        <div>
            <h1>我是行业新闻组件</h1>
        </div>
    </template>

    <!-- 导入js文件 这两个位置不能颠倒 -->
    <script src="./js/vue.js"></script>
    <script src="./js/vue-router .js"></script>

    <script>
        // 首页组件
        var index = {
            template:'#index'
        }

        var news = {
            template:'#news'
        }
        var one = {
            template:'#one'
        }
        var two = {
            template:'#two'
        }

        // 创建路由实例
        var myRouter = new VueRouter({
            // 配置路由规则
            routes:[
                {
                    path:'/index',
                    component:index,
                    // meta路由元信息
                    // 把任意信息 挂载到路由上 的meta属性里
                    meta:{
                        title:'首页',
                        icon:'大风车',
                        requiresAuth:true
                    }
                },
                {
                    path:'/news',
                    component:news,
                    // 嵌套路由（子路由）
                    children:[
                        // 配置 子路由规则
                        {
                            path:'/news/one',
                            component:one
                        },
                        {
                            path:'/news/two',
                            component:two
                        },
                    ]
                },
               
            ]
        });
       


        // 根组件
        var a = new Vue({
            // 模板选择器
            el:'#app',

            // 挂载路由
            router:myRouter,

            // 数据中心
            data(){
                return {

                }
            },
            // 方法中心
            methods:{

            },
            components:{
                index,
                news,
                one,
                two
            }

        })
    </script>

预览效果：