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新手入门指导教程
Nov 18 Vue.js
vue-router定义元信息meta操作
Dec 07 Vue.js
vue实现购物车的小练习
Dec 21 Vue.js
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 Vue.js
深入了解Vue动态组件和异步组件
Jan 26 Vue.js
Vue单页面应用中实现Markdown渲染
Feb 14 Vue.js
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
Feb 26 Vue.js
vue3引入highlight.js进行代码高亮的方法实例
Apr 08 Vue.js
vue+elementUI实现表格列的显示与隐藏
Apr 13 Vue.js
vue项目配置sass及引入外部scss文件
Apr 14 Vue.js
vue 给数组添加新对象并赋值
Apr 20 Vue.js
vue实现登陆页面开发实践
May 30 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
SMARTY学习手记
2007/01/04 PHP
检查php文件中是否含有bom的函数
2012/05/31 PHP
CI(CodeIgniter)框架中的增删改查操作
2014/06/10 PHP
php编写批量生成不重复的卡号密码代码
2015/05/14 PHP
一个非常实用的php文件上传类
2017/07/04 PHP
ajax+php实现无刷新验证手机号的实例
2017/12/22 PHP
浅谈PHP无限极分类原理
2019/03/14 PHP
PHP如何实现阿里云短信sdk灵活应用在项目中的方法
2019/06/14 PHP
php实现微信小程序授权登录功能(实现流程)
2019/11/13 PHP
JS特殊函数(Function()构造函数、函数直接量)区别介绍
2013/05/19 Javascript
javascript同页面多次调用弹出层具体实例代码
2013/08/16 Javascript
使图片旋转的3种解决方案
2013/11/21 Javascript
JavaScript使用cookie记录临时访客信息的方法
2015/04/07 Javascript
关于JS中prototype的理解
2015/09/07 Javascript
cocos creator Touch事件应用(触控选择多个子节点的实例)
2017/09/10 Javascript
js通过Date对象实现倒计时动画效果
2017/10/27 Javascript
10行原生JS实现文字无缝滚动(超简单)
2018/01/02 Javascript
JsChart组件使用详解
2018/03/04 Javascript
微信小程序蓝牙连接小票打印机实例代码详解
2019/06/03 Javascript
微信小程序 button样式设置为图片的方法
2020/06/19 Javascript
[01:04:39]OG vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python实现的统计文章单词次数功能示例
2019/07/08 Python
python正则-re的用法详解
2019/07/28 Python
django实现将后台model对象转换成json对象并传递给前端jquery
2020/03/16 Python
推荐技术人员一款Python开源库(造数据神器)
2020/07/08 Python
使用python实现下载我们想听的歌曲,速度超快
2020/07/09 Python
python与c语言的语法有哪些不一样的
2020/09/13 Python
BeautifulSoup获取指定class样式的div的实现
2020/12/07 Python
Superdry极度乾燥官网:日本街头风格,纯英国制造品牌
2016/10/31 全球购物
彪马英国官网:PUMA英国
2019/02/11 全球购物
智能室内花园:Click & Grow
2021/01/29 全球购物
LUISAVIAROMA德国官网:时尚奢侈品牌购物网站
2020/11/12 全球购物
初一英语教学反思
2014/01/11 职场文书
会计试用期工作总结2015
2015/05/28 职场文书
领导干部学习三严三实心得体会
2016/01/05 职场文书
Mac电脑OS系统下安装Nginx的详细教程
2022/04/14 Servers