vue 二级菜单制作

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

代码如下:

在绑定时<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.idthis.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.复制 详情页的path2.参数拼接?--><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.titlethis.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.复制 详情页的path2.参数拼接?  &字符串的 基础拼接--><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.idthis.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.idconsole.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("路由更新之后");}}

vue 二级菜单制作相关推荐

html 轮播图+二级菜单制作
1.html 轮播图+二级菜单制作 2.sunny前面写过二级菜单的制作以及轮播图的制作,这一次sunny把他们结合在一起了ヾ(≧▽≦*)o
关于初学者对于二级菜单制作的小结
1,首先我们应该列出第一级菜单,可以用无序列表ul制作,别忘记用 list-style:none;清除无序列表前的标识 2,制作二级菜单,二级菜单是嵌套在一级菜单内,即嵌套在一级菜单的li标签内,为方 ...
vue——二级菜单demo
学习了vue,最近想着写一写demo练一练,今天写的二级菜单,中间踩过很多坑 1.存数据:最开始想着一级菜单存一个数组,二级菜单存不同的数组.那么问题来了,一级菜单和二级菜单应该是超级相关联的,如果分 ...
AXURE8.0制作二级菜单和三级菜单
今日分享:用AXURE8.0制作二级菜单和三级菜单二级菜单操作思路:首先做出一个[一级菜单]和三个[二级菜单],完成后再复制多个[一级菜单]和[二级菜单] 第一步:拖一个矩形,作为[一级菜单],命 ...
vue 左侧菜单隐藏_vue.js 左侧二级菜单显示与隐藏切换的实例代码?
郎朗坤废话不多说了,直接给大家贴代码了,完整代码: vue点击切换显示隐藏 {{item.name}} {{subItem.name}} 以上所述是小编给大家介绍的vue.js 左侧二级菜单显示与隐 ...
HTML5制作二级菜单（主菜单的子菜单）
HTML5制作二级菜单(主菜单的子菜单) 一.HTML文件代码二. CSS文件代码三.效果图一.HTML文件代码  <!DOCTYPE h ...
Unity Toggle组制作菜单及菜单栏移动和二级菜单实现！
Unity - Toggle组制作菜单及菜单栏移动和二级菜单实现! 一:效果一二:效果二三:效果三四:此Demo下载 ------> 本文提供详细教程记录遇到的难点并帮助同行的朋友们坚 ...
python制作二级菜单_python之tkinter使用-二级菜单
# 菜单功能说明:二级菜单 import tkinter as tk from tkinter import messagebox root = tk.Tk() root.title('菜单选择') ...
html二级菜单显示与隐藏,Vue实现二级菜单的显示与隐藏
Vue实现二级菜单的显示与隐藏 *{ padding: 0; margin: 0; font-size: 14px; } ul{ width: 200px; height: auto; } h2{ b ...

vue 二级菜单制作

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

第二种方式:path跳转传值

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

vue 二级菜单制作相关推荐

最新文章

热门文章