vue 二级菜单制作

最新推荐文章于 2024-09-11 10:10:44 发布

管理界的扫地僧

最新推荐文章于 2024-09-11 10:10:44 发布

阅读量2k

点赞数 2

分类专栏：日常总结

本文链接：https://blog.csdn.net/weixin_48181168/article/details/118614864

版权

日常总结专栏收录该内容

20 篇文章 3 订阅

订阅专栏

第一种方法,用命名路由传值

代码如下:

在绑定时<router-link :to="{name:'home1'}">小说首页</router-link>

<!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>
</head>

<body>
    <div id="app">
        <div>
            <!-- 变量需要绑定 -->
            <router-link :to="{name:'home1'}">小说首页</router-link>-----------------
            <!-- 绑定变量 -->
            <router-link :to="artObj">小说列表</router-link>
            <!-- query的参数 会在地址栏 进行拼接 类似get请求的参数方式
            params 并不会出现在  地址栏当中 -->
            <!-- <router-link :to="{name:'detailName',params:{id:123},query:{name:'zh'}}">详情页</router-link> -->
        </div>
        <hr>
        <!-- 路由出口 就是匹配路径的页面在哪里显示 -->
        <router-view></router-view>
    </div>
    <script src="../zuoye/作业-星级评分/vue.js"></script>
    <!-- 需要引用路由文件 -->
    <script src="./vue-router.js"></script>
    <script type="text/x-template" id="first">
        <div class="first-wrapper">
            <h1>小说首页加载完成</h1>
            <ul>
                <li v-for="(v, index) in names" :key="index">
                    <span>{{v}}</span>
                </li>
            </ul>
        </div>
    </script>
    <script type="text/x-template" id="second">
        <div class="second-wrapper">
            <h1>小说列表页</h1>
            <ul>
                <li v-for="(v, index) in articles" :key="index">
                    <router-link :to="{name:'detailName',params:{id:v.id},query:{obj:v}}">命名路由-跳转-传参:{{v.title}}</router-link>
                </li>
            </ul>
        </div>
    </script>
    <!-- 小说详情页 -->
    <script type="text/x-template" id="artDetail">
        <div>
            <h1>{{artDetailObj.title}}</h1>
            <h1>{{artDetailObj.content}}</h1>
        </div>
    </script>
    <script>
        // 数据
        var dataArr = [
            {
                id: 1,
                title: "天龙八部",
                content: "北宋年间，外族纷纷觊觎大宋国土，形成汉、辽对立的局面。丐帮帮主乔峰（胡军饰）因拒绝副帮主妻康敏（钟丽缇饰）之爱遭报复指为契丹人后裔而受尽中原武林人士唾弃。乔峰为平反遂四出追查身世，期间认识了大理世子段誉（林志颖饰）及虚竹和尚（高虎饰），并结拜为兄弟。乔峰追寻身世时屡遭奸人所害，含冤莫白，更错杀红颜知己阿朱（刘涛饰），后为救朱妹阿紫（陈好饰）寻医至大辽，辗转成为大辽国南院大王，但与中原关系则更趋恶劣。段誉为人豁达开朗，对貌若天仙的王语嫣（刘亦菲饰）一见倾心，可惜语嫣只钟情其表哥慕容复（修庆饰），令三人陷入一段纠缠不清的苦恋。虚竹天性纯良，宅心仁厚，深得高人指点，武功高强，后被选为西夏驸马。乔峰、段誉和虚竹在异域拥有着举足轻重的地位，在汉辽相争的时势下，各种江湖及情感上的恩恩怨怨正等着他们去面对   。"
            },
            {
                id: 2,
                title: "价值-张磊",
                content: "介绍了张磊的个人历程、他所坚持的投资理念和方法以及他对价值投资者自我修养的思考，还介绍了他对具有伟大格局观的创业者、创业组织以及对人才、教育、科学观的理解"
            },
            {
                id: 3,
                title: "人生若只初见",
                content: "似在谈诗词，又似在谈风月。她不拘泥于对古典诗词字面的理解，也非传统意义上的简单赏析，而是一种风格独特、感情丰富的散文随笔"
            }
        ];
        // 首页
        const First = {
            template: "#first",
            data() {
                return {
                    names: ['首页模块-1', '首页模块-2', '首页模块-3', '首页模块-4', '首页模块-5']
                }
            }
        }
        // 列表页
        const Second = {
            template: "#second",
            data() {
                return {
                    articles: dataArr
                }
            }
        }
        // 详情页
        const ArticleDetail = {
            template: "#artDetail",
            data(){
              return{
                artId:"",
                artDetailObj:null
              }  
            },
            created() {
                this.artId = this.$route.params.id
                this.artDetailObj = this.$route.query.obj 
            },
        }
        // 路由表
        // 命名路由就是给 路由起个别名
        var routes = [
            {
                // 路由表有这个值 上面需要绑定 {name:'home1'}
                path: "/",
                name: "home1",
                component: First
            },
            {
                path: "/second",
                name: "artiD",
                component: Second
            },
            {
                path: "/detail",
                name: "detailName",
                component: ArticleDetail
            }
        ]
        // 路由实例
        const router = new VueRouter({
            routes
        })
        // vue实例
        new Vue({
            el: "#app",
            router,
            data: {
                artObj: {
                    name: "artiD"
                }
            },
            components: {
                First,
                Second,
                ArticleDetail
            }
        })
    </script>
</body>

</html>

如果需要添加评论页:

在列表页添加显示方法:

<script type="text/x-template" id="second">
        <div class="second-wrapper">
            <h1>小说列表页</h1>
            <!-- 常规path写法 -->
            <router-link to="/pinglun">评论页</router-link>
            <!-- 命名路由的写法 -->
            <!-- <router-link :to="{name:'pl'}">评论页</router-link> -->
            <ul>
                <li v-for="(v, index) in articles" :key="index">
                    <router-link :to="{name:'detailName',params:{id:v.id},query:{obj:v}}">命名路由-跳转-传参:{{v.title}}</router-link>
                </li>
            </ul>
            <!-- 怎样区分 一级路由  二级路由 -->
            <!-- 哪个页面的路由一般对应哪个界面的路由出口 -->
            <router-view></router-view>
        </div>
    </script>

添加模块

<script type="text/x-template" id="comment">
        <div>
            <h1>评论页</h1>
            <ul>
                <li>小说不错</li>
                <li>男主很帅</li>
                <li>挂太多了</li>
                <li>希望不是来凑数的</li>
            </ul>
        </div>

    </script>

// 评论页
        const Comment = {
            template: "#comment"
        }

路由表写法:

// 路由表
        // 命名路由就是给 路由起个别名
        var routes = [
            {
                // 路由表有这个值 上面需要绑定 {name:'home1'}
                path: "/",
                name: "home1",
                component: First
            },
            {
                path: "/second",
                name: "artiD",
                component: Second,
                // 默认子路由渲染 path 
                redirect: "/pinglun",
                children: [
                    //详情页
                    {
                        path: "/pinglun",
                        name: "pl",
                        component: Comment

                    },
                    {
                        path: "/detail",
                        name: "detailName",
                        component: ArticleDetail
                    }

                ]
            },

        ]

第二种方式:path跳转传值

与第一方式不同在于:<router-link to="/?name=zh&age=18">小说首页</router-link>

注意::这个to在绑定时,不加:!!!!

命名路由 name 和路由表里面的name对应 ? 后面不进行路由匹配
也就是路由匹配匹配的是url里面路径部分
也就是端口号后面 ? 前面的部分

<div id="app">
        <div>
            <router-link to="/?name=zh&age=18">小说首页</router-link>-----------------
            <!-- 绑定变量 -->
            <router-link :to="artObj">小说列表</router-link>
        <hr>
        <!-- 路由出口 就是匹配路径的页面在哪里显示 -->
        <router-view></router-view>
    </div>

在当前页面二级菜单的跳转有更改

<script type="text/x-template" id="second">
        <div class="second-wrapper">
            <h1>小说列表页</h1>
            <ul>
                <li v-for="(v, index) in articles" :key="index">
                    <!-- path跳转
                        0. :to=基本结构 绑定变量 模板字符串
                    1.复制 详情页的path
                    2.参数拼接?
                 -->
                    <router-link :to="'/detail/'+v.id+ '?title='+v.title+'&content='+v.content">path路由-跳转-传参:{{v.title}}</router-link>
                </li>
            </ul>
        </div>
    </script>

// 首页
        const First = {
            template: "#first",
            data() {
                return {
         names: ['首页模块-1', '首页模块-2', '首页模块-3', '首页模块-4', '首页模块-5']
                }
            }
        }
        // 列表页
        const Second = {
            template: "#second",
            data() {
                return {
                    articles: dataArr
                }
            },
        }
        // 详情页
        const ArticleDetail = {
            template: "#artDetail",
            data(){
              return{
                artId:"",
                artDetailObj:{}
              }  
            },
            created() {
                
                this.artDetailObj.title= this.$route.query.title
                this.artDetailObj.content= this.$route.query.content
                
            },
        }

第三种方式;当前页显示二级菜单内容:

方式二的基础上加上: <router-view></router-view>

 <script type="text/x-template" id="second">
        <div class="second-wrapper">
            <h1>小说列表页</h1>
            <ul>
                <li v-for="(v, index) in articles" :key="index">
                    <!-- path跳转
                        0. :to=基本结构 绑定变量 模板字符串
                    1.复制 详情页的path
                    2.参数拼接?  &
                    字符串的 基础拼接
                 -->
                    <router-link :to="'/detail/'+v.id+ '?title='+v.title+'&content='+v.content">path路由-跳转-传参:{{v.title}}</router-link>
                </li>
            </ul>
            <router-view></router-view>
            <!-- 路由出口
            一级路由对应一级路由的出口
            二级路由对应路由的出口
            路由在那个界面写,出口就在那个界面
            配置二级路由
            -->
        </div>
    </script>

在路由表更改代码如下:关键代码:二级菜单需要用children.

 var routes = [
            {
                // 路由表有这个值 上面需要绑定 {name:'home1'}
                path: "/",
                name: "home1",
                component: First
            },
            {
                path: "/second",
                name: "artiD",
                component: Second,
                // 配置子路由 二级路由
                children: [
                    {
                        path: "/detail/:artId",
                        name: "detailName",
                        component: ArticleDetail
                        // 路由可以无限的嵌套  三级路由  四级路由  一般不会超过5层
                        // children[]
                    }

                ]
            },
        ]

第三种写法优化.路由监听,当前页面点击刷新.需要加watch事件.

 // 详情页
        const ArticleDetail = {
            template: "#artDetail",
            data() {
                return {
                    artId: "",
                    artDetailObj: null
                }
            },
            watch:{
                $route:function(newV,oldV){
                    console.log("详情页-----newV",newV);
                    console.log("详情页-----oldV",oldV);
                    this.artDetailObj = this.$route.query.obj
                }
            },
            created() {
                this.artId = this.$route.params.id
                this.artDetailObj = this.$route.query.obj
            },
        }

使用路由钩子实现二级页面在当前页显示

// 详情页
        const ArticleDetail = {
            template: "#artDetail",
            data() {
                return {
                    artId: "",
                    artDetailObj: null
                }
            },
           
            created() {
                // 两种传值
                // params接收的 传递的参数信息
                console.log("详情页--路由", this.$route.params)
                // query 接收的url地址栏的参数
                console.log("详情页--路由", this.$route.query)
                // 获取用户传过来的id
                // 需要一个数据 来接收 传过来的值
                this.artId = this.$route.params.id
                console.log("传过来的----id", this.artId);
                this.artDetailObj = this.$route.query.obj
            },
            // 路由钩子函数 路由的生命周期
            // 注意不要加r  route 
            beforeRouteUpdate (newV, oldV, next) {
                // 必须允许路由继续往前走
                next()
                console.log("------路由更新之前newV",newV);
                console.log("------路由更新之前oldV",oldV);
                this.artDetailObj = newV.query.obj
            },
            routeUpdate(){
                console.log("路由更新之后");

            }
        }