vue 在单页面应用里使用二级套嵌路由


Posted in Vue.js onDecember 19, 2020

在一个单页面应用里使用二级套嵌路由

目录结构如下:

vue 在单页面应用里使用二级套嵌路由

其中main.js为全局配置文件,App.vue为项目入口。

main.js中路由配置如下

import Vue from 'vue'//引入vue
import App from './App'//引入主模板
import Router from 'vue-router'// 引入router路由
// 引入项目的模块组件
import licai from './components/licai'
import home from './components/home'
import wode from './components/wode'
import home1 from './components/home/home1'
import home2 from './components/home/home2'
import home2_1 from './components/home/home2_box/home2_1'//套嵌路由
import home2_2 from './components/home/home2_box/home2_2'
 
Vue.use(Router)// 使用router
 
// 定义路由
var routes = [
{ path: '/', redirect: '/home' },//默认显示home
{
 path: '/home',
 component: home,//路径home的组件是home
 meta: { navShow: true}
}, {
 path: '/licai',
 component: licai,
 meta: { navShow: true}
}, {
 path: '/wode',
 component:wode,
 meta: { navShow: true}
},{
  path:'/home1/:num',
  component:home1,
  meta: { navShow: false}
},{
  path:'/home2',
  component:home2,
  meta: { navShow: false},
  //这里定义了两个子路由在home2模块下
  children:[
    { path: '/home2/home2_1', component:home2_1},
    { path: '/home2/home2_2', component:home2_2}
  ]
}]
// 实例化路由
var vueRouter = new Router({
 routes//此路由为上方定义
})
// 创建和挂载根实例
new Vue({
 el: '#app',//vue项目在哪个元素下
 router: vueRouter,//使用路由
 template: '<App></App>',
 components: { App }
})

App.vue为主模板,也就是入口文件,其中定义的路由与一级路由无任何区别:

<template>
 <div id="app1">
  <div class="nav-bottom" v-show="$route.meta.navShow">
    <!-- 引入公用的头部 header组件 -->
    <v-header></v-header>
  </div>
  <div class="contianer">
    <!-- 路由中的组件在这里被渲染,默认被渲染的为home组件,已在路由配置中设置 -->
    <router-view></router-view>
  </div>
 </div>
</template>

home.vue,这里是首页,从这里可以进入home2页面:

<template>
  <div class="home box">
      
    <h3>这里是home页面</h3>
    <router-link to="/home2">套嵌路由</router-link>
      
  </div>
</template>

home2.vue,这里可以展示套嵌路由了:

<template id="home2">
  <div>
    <header class="home header"><a href="javascript:void(0);" rel="external nofollow" οnclick="javacript:window.history.go(-1)"><img src="../../../static/img/png1.png"/></a>路由套嵌</header>
    <router-link to="/home2/home2_1">子页面1</router-link>
    <router-link to="/home2/home2_2">子页面2</router-link>
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
  </div>
</template>
<style>
.home.header{font-size:0.8rem;position:relative;}
.home.header>a{display: block;height:0.8rem;width:0.4rem;margin-top:0.6rem;position:absolute;left:0.5rem;}
.home.header>a>img{height:100%;width:100%;display:block;}
</style>

效果:

vue 在单页面应用里使用二级套嵌路由

以上就是vue 在单页面应用里使用二级套嵌路由的详细内容,更多关于vue 使用二级嵌套路由的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
vue+iview分页组件的封装
Nov 17 Vue.js
在Vue中使用CSS3实现内容无缝滚动的示例代码
Nov 27 Vue.js
vue使用exif获取图片经纬度的示例代码
Dec 11 Vue.js
vue实现滚动鼠标滚轮切换页面
Dec 13 Vue.js
基于vue+echarts数据可视化大屏展示的实现
Dec 25 Vue.js
vue keep-alive的简单总结
Jan 25 Vue.js
Vue通过懒加载提升页面响应速度
May 10 Vue.js
vue组件的路由高亮问题解决方法
May 11 Vue.js
vue如何批量引入组件、注册和使用详解
May 12 Vue.js
Vue+Element UI实现概要小弹窗的全过程
May 30 Vue.js
vue修饰符.capture和.self的区别
Apr 22 Vue.js
Vue Element plus使用方法梳理
Dec 24 Vue.js
vue中如何添加百度统计代码
Dec 19 #Vue.js
vue 导航守卫和axios拦截器有哪些区别
Dec 19 #Vue.js
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
Dec 19 #Vue.js
Vue实现手机号、验证码登录(60s禁用倒计时)
Dec 19 #Vue.js
Vue——前端生成二维码的示例
Dec 19 #Vue.js
如何在vue中使用kindeditor富文本编辑器
Dec 19 #Vue.js
vue 在服务器端直接修改请求的接口地址
Dec 19 #Vue.js
You might like
php字符串截取的简单方法
2013/07/04 PHP
PHP 5.5 创建和验证哈希最简单的方法详解
2013/11/07 PHP
php 多文件上传的实现实例
2016/10/23 PHP
php图像验证码生成代码
2017/06/08 PHP
jquery 插件 人性化的消息显示
2008/01/21 Javascript
javascript,jquery闭包概念分析
2010/06/19 Javascript
JavaScript运动减速效果实例分析
2015/08/04 Javascript
DEDECMS如何为文章添加HOT NEW标志图片
2015/08/14 Javascript
jQuery实现带延迟的二级tab切换下拉列表效果
2015/09/01 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
2016/01/19 Javascript
JQuery ztree带筛选、异步加载实例讲解
2016/02/25 Javascript
谈谈target=_new和_blank的不同之处
2016/10/25 Javascript
Vue.js学习之过滤器详解
2017/01/22 Javascript
图解Javascript——作用域、作用域链、闭包
2017/03/21 Javascript
js实现适配不同的屏幕大小
2017/04/10 Javascript
微信小程序实现图片上传放大预览删除代码
2020/06/28 Javascript
vue.js指令v-for使用以及下标索引的获取
2019/01/31 Javascript
Vue表单绑定的实例代码(单选按钮,选择框(单选时,多选时,用 v-for 渲染的动态选项)
2019/05/13 Javascript
[10:24]郎朗助力完美“圣”典,天籁交织奏响序曲
2016/12/18 DOTA
全面了解Python的getattr(),setattr(),delattr(),hasattr()
2016/06/14 Python
Python 数据处理库 pandas进阶教程
2018/04/21 Python
flask框架使用orm连接数据库的方法示例
2018/07/16 Python
python正向最大匹配分词和逆向最大匹配分词的实例
2018/11/14 Python
解决python3运行selenium下HTMLTestRunner报错的问题
2018/12/27 Python
Python3.4学习笔记之 idle 清屏扩展插件用法分析
2019/03/01 Python
python接口自动化(十六)--参数关联接口后传(详解)
2019/04/16 Python
python3中property使用方法详解
2019/04/23 Python
Pycharm插件(Grep Console)自定义规则输出颜色日志的方法
2020/05/27 Python
快速创建python 虚拟环境
2020/11/28 Python
Opencv+Python识别PCB板图片的步骤
2021/01/07 Python
施华洛世奇中国官网:SWAROVSKI中国
2020/06/16 全球购物
比较基础的php面试题及答案-填空题
2014/04/26 面试题
个人自我鉴定写法
2013/11/30 职场文书
通信工程专业毕业生推荐信
2013/12/25 职场文书
会计电算化学生个人的自我评价
2014/02/08 职场文书
古诗之爱国古诗5首
2019/09/20 职场文书