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用mixin合并重复代码的实现
Nov 27 Vue.js
Vue router传递参数并解决刷新页面参数丢失问题
Dec 02 Vue.js
Vue-router中hash模式与history模式的区别详解
Dec 15 Vue.js
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
Feb 26 Vue.js
vue+django实现下载文件的示例
Mar 24 Vue.js
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
May 18 Vue.js
一篇文章学会Vue中间件管道
Jun 20 Vue.js
一起来看看Vue的核心原理剖析
Mar 24 Vue.js
vue实现可以快进后退的跑马灯组件
Apr 08 Vue.js
vue代码分块和懒加载非必要资源文件
Apr 11 Vue.js
vue实现在data里引入相对路径
Jun 05 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
模拟SQLSERVER的两个函数:dateadd(),datediff()
2006/10/09 PHP
php基础知识:类与对象(2) 自动加载对象
2006/12/13 PHP
PHP和Mysqlweb应用开发核心技术 第1部分 Php基础-3 代码组织和重用2
2011/07/03 PHP
解析php常用image图像函数集
2013/06/24 PHP
PHP中创建和验证哈希的简单方法实探
2015/07/06 PHP
详解PHP中的mb_detect_encoding函数使用方法
2015/08/18 PHP
删除PHP数组中的重复元素的实现代码
2017/04/10 PHP
PHP如何获取当前主机、域名、网址、路径、端口等参数
2017/06/09 PHP
php使用curl_init()和curl_multi_init()多线程的速度比较详解
2018/08/15 PHP
关于laravel5.5的定时任务详解(demo)
2019/10/23 PHP
PHP配合fiddler抓包抓取微信指数小程序数据的实现方法分析
2020/01/02 PHP
js下弹出窗口的变通
2007/04/18 Javascript
FF火狐下获取一个元素同类型的相邻元素实现代码
2012/12/15 Javascript
jQuery基础_入门必看知识点
2016/07/04 Javascript
详解前端自动化工具gulp自动添加版本号
2016/12/20 Javascript
微信小程序获取循环元素id以及wx.login登录操作
2017/08/17 Javascript
vue登录路由验证的实现
2017/12/13 Javascript
Vue.js点击切换按钮改变内容的实例讲解
2018/08/22 Javascript
js实现文件上传功能 后台使用MultipartFile
2018/09/08 Javascript
webpack4.x CommonJS模块化浅析
2018/11/09 Javascript
three.js实现炫酷的全景3D重力感应
2018/12/30 Javascript
深入理解Node内建模块和对象
2019/03/12 Javascript
Python中实现远程调用(RPC、RMI)简单例子
2014/04/28 Python
Python中DJANGO简单测试实例
2015/05/11 Python
Python爬虫设置代理IP的方法(爬虫技巧)
2018/03/04 Python
浅谈python多进程共享变量Value的使用tips
2019/07/16 Python
django queryset 去重 .distinct()说明
2020/05/19 Python
Under Armour安德玛中国官网:美国高端运动科技品牌
2018/03/09 全球购物
关于爱情的广播稿
2014/01/16 职场文书
幼儿园小班家长寄语
2014/04/02 职场文书
超市开店计划书
2014/04/26 职场文书
优秀教导主任事迹材料
2014/05/09 职场文书
明星员工获奖感言
2014/08/14 职场文书
大学生实习证明范本
2014/09/19 职场文书
领导干部四风问题自我剖析材料
2014/09/25 职场文书
经理聘任证明
2015/03/02 职场文书