vue路由嵌套的SPA实现步骤
本文为大家分享了路由嵌套的SPA实现的步骤：
A（/a）组件需要嵌套B组件(/b)和C组件(/c)
①准备嵌套其它组价的父组件 指定一个容器
在A组件指定一个容器
<router-view></router-ivew>
②在A组件的路由配置对象中指定children属性
{
path:'/a',
component:A,
children:[
{path:'/b',component:B},
{path:'/c',component:C},
]
}
补充：
//数字如果超出记录的次数，是不行的。
this.$router.go(num);
如果num是正数，向前进
如果num是负数，向后退
代码
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>路由嵌套</title>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
</head>
<body>
<div id="container">
<p>{{msg}}</p>
<router-view></router-view>
</div>
<script>
//登录组件
var myLogin = Vue.component("login",{
template:`
<div>
<h1>登录组件</h1>
<router-link to="/mail">登录</router-link>
</div>
`
})
// 邮箱页面
var myMail = Vue.component("mail",{
// 定义一个返回的方法
methods:{
goBack:function(){
this.$router.go(-1);
}
},
template:`
<div>
<h1>邮箱主页面</h1>
<ul>
<li>
<router-link to="/inbox">收件箱</router-link>
</li>
<li>
<router-link to="/outbox">发件箱</router-link>
</li>
</ul>
// 点击按钮返回前面的页面
<button @click="goBack">返回</button>
<router-view></router-view>
</div>
`
// 指定一个容器,加载收件箱或收件箱的列表
})
// 收件箱组件
var myInBox = Vue.component("inbox-component",{
template:`
<div>
<h4>收件箱</h4>
<ul>
<li>未读邮件1</li>
<li>未读邮件2</li>
<li>未读邮件3</li>
</ul>
</div>
`
})
// 发件箱组件
var myOutBox = Vue.component("outbox-component",{
template:`
<div>
<h4>发件箱</h4>
<ul>
<li>已发送邮件1</li>
<li>已发送邮件2</li>
<li>已发送邮件3</li>
</ul>
</div>
`
})
//配置路由词典
new Vue({
router:new VueRouter({
routes:[
{path:'',redirect:'/login'},
{path:'/login',component:myLogin},
{path:'/mail',component:myMail,children:[
{path:'/inbox',component:myInBox},
{path:'/outbox',component:myOutBox}
]},
]
}),
el:"#container",
data:{
msg:"Hello VueJs"
}
})
//通过再次指定一个<router-view></router-view>和children:[]
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
vue中SPA单页面应用程序详解
一.SPA的概述 SPA(single page application)单页面应用程序,在一个完成的应用或者站点中,只有一个完整的html页面,这个页面有一个容器,可以把需要加载的代码片段插入到该容器中. SPA的工作原理: eg: http://127.0.0.1/index.html#/start ①根据地址栏中url解析完整的页面:index.html 加载index.html ②根据地址栏中url解析#后的路由地址: start 根据路由地址,去在当前应用的配置中 找该路由地址的配置
-
Vue Spa切换页面时更改标题的实例代码
在Vue组件化开发过程中,因为是单页面开发,但是有时候需要页面的title根据情况改变,于是上网查了一下,各种说法花(wo)里(kan)胡(bu)哨(dong), 于是想到一个黑科技 documet.title="xxx"; 随便创建一个项目,在独立的模块中,created在钩子函数启动之后document.title='标题'; 但是据说在IOS的微信下是无效的,虽然用苹果机测试过有用,但是想到这样会影响我的代码洁癖. <script> export default {
-
Vue.js实现一个SPA登录页面的过程【推荐】
技术栈 vue.js 主框架 vuex 状态管理 vue-router 路由管理 一般过程 在一般的登录过程中,一种前端方案是: 检查状态:进入页面时或者路由变化时检查是否有登录状态(保存在cookie或者本地存储的值): 如果有登录态则查询登录信息(uid,头像等...)并保存起来:如果没有则跳转到登录页: 在登录页面(或者登录框),校检用户输入信息是否合法: 校检通过后发送登录请求:校检不成功则反馈给用户: 登录成功则从后端数据中取出session信息保存登录状态(可能需要跳转);登录不成功
-
使用node+vue.js实现SPA应用
业务需求 最近公司要求开发web版的app,由于app是偏向内容方面,而且带了一个聊天模块,所以一般的多页开发不是很适合,而且主要是手机浏览,对加载速度或者用户体验来说都比较苛刻.调研了很多框架和模式,最后自己东拼西凑搞出来了这么一个玩意. 服务端 毫无疑问使用node,使用typescript可以有效的在编码同时查错,强类型语言写服务端毫无压力. #app.ts 只贴重要代码 var webpack = require('webpack') var webpackDevMiddleware =
-
vue路由嵌套的SPA实现步骤
本文为大家分享了路由嵌套的SPA实现的步骤: A(/a)组件需要嵌套B组件(/b)和C组件(/c) ①准备嵌套其它组价的父组件 指定一个容器 在A组件指定一个容器 <router-view></router-ivew> ②在A组件的路由配置对象中指定children属性 { path:'/a', component:A, children:[ {path:'/b',component:B}, {path:'/c',component:C}, ] } 补充: //数字如果超出记录的次
-
vue 路由嵌套高亮问题的解决方法
正常路由嵌套是没有问题的,但是如果你已经在当前主路由页面了,然后再次点击主路由就会出现页面数据空白的情况 看代码: //主路由通过v-for循环出来 <div class="list-group"> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" r
-
Vue路由模块化配置的完整步骤
前言 企业运营后台页面很多,路由如若不区分模块化配置,所有路由挤在同一个文件将不好维护,所以路由的配置也要模块化 分享两个解决方案 -- Vue 路由配置的模块化(Plan A and Plan B) 注册需要 首先路由注册需要啥 // main.js new Vue({ el: '#app', router, store, components: { App }, template: '<App/>' }) // 这里的 router 是这样的 export default new Rout
-
Vue实现路由嵌套的方法实例
1.嵌套路由又称子路由,在实际应用中,通常由多层嵌套的组件组合而成.(其实就是套娃操作罢了,跟后端的视图跳转路径蛮像的): 2. 创建用户信息组件,在 views/user 目录下创建一个名为 Profile.vue 的视图组件: Profile.vue <template> <h1>咸鱼_翻身1</h1> </template> <script> export default { name: "UserList" } <
-
vue 路由视图 router-view嵌套跳转的实现
目录 1.修改app.vue页面 2.创建登录页面(/views/login/login.vue) 2.1.在router/index.js中添加登录页面路由 3.创建主页面(/components/index.vue) 3.1.创建主页面路由 4.修改首页 4.1.开启菜单路由模式,并修改菜单跳转路径 4.2.添加router-view 5.创建两个子页面 目的: 实现功能:制作一个登录页面,跳转到首页,首页包含菜单栏.顶部导航栏.主体,标准的后台网页格式.菜单栏点击不同菜单控制主体展示不同的
-
vue 2.0路由之路由嵌套示例详解
前言 vue一个重要的方面就是路由,下面是自己写的一个路由的例子分享给大家供大家参考学习,下面来看看详细的介绍. 方法如下: 1.引入依赖库就不必再说 2.创建组件 两种写法 第一种:间接 <template id="home"> <div> <h1>Home</h1> <p>{{msg}}</p> </div> </template> var About = Vue.extend({ te
-
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
解决vue-router嵌套路由(子路由)在history模式下刷新无法渲染页面的问题,具体内容如下 一. 异常描述 本来使用的是vue-router的hash模式,但是hash模式下url需要带"#"符号,不仅看起来不舒服,而且有些场景下是会破坏路由中的"#"(微信分享页面就会把"#"后边的内容处理掉),所以就需要使用history模式,然后就让后端改下nginx配置: location / { try_files $uri $uri/ /in
-
vue多层嵌套路由实例分析
本文实例讲述了vue多层嵌套路由.分享给大家供大家参考,具体如下: 多层嵌套: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="bower_components/vue/dist/vue.js"></scri
-
vue router路由嵌套不显示问题的解决方法
vue router路由嵌套不显示问题的解决方法,具体内容如下 路由嵌套,vue2.0 router中嵌套路由不成功,如何解决? 我先说下我的需求,例如下图 我本来是想打算将中间的模块做一层子路由(test模块),模块代码没错,每次编译都正常好使. 但是打开编译后的文件之后,一直都是==只能渲染一级路由,子路由没有效果,==,查了一推资料. 帖子说:子路由多写了/, 会默认从根目录开始匹配,我试着也删除掉这些东西,但是后来发现,我的问题并不是这个原因造成的,原因在于,在子模块里面引用子路由,也是
-
vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作
最近开发vue项目,遇到的一些问题,这里整合一下,看到一些博客已经有写相关知识,然后自己再次记录一下. 这是关于vue路由相关比较常见的问题,以后遇到相关路由的问题,会不断更新这篇博客. 需求1:从填写表单A页面跳转到B页面,然后再从B页面返回到A页面,实现A页面的所填的数据保留 一.设置路由缓存: 1.App.vue中加入<keep-alive> 具体代码如下: <template> <div id="app"> <!--<img sr