Vue中路由嵌套（子路由）

路由的嵌套就是点击一个路由地址后，继续点击，进入到另外一个路由地址下，即第二个路由就是第一个路由的子路由。
根据我们前面学习的VueRouter的知识，可以直接写出代码来实现：

一般写法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./lib/vue-2.4.0.js"></script><script src="https://unpkg.com/vue-router/dist/vue-router.js"></script></head><body><div id="app"><router-link to="/account">account</router-link><router-view></router-view></div><template id="temp"><div><h1>Account组件</h1><router-link to="/account/login">登录</router-link></div></template><script>var account = {template:'#temp',}var router = new VueRouter({routes:[{path:'/account',component:account},]})new Vue({el:'#app',data:{},methods: {},router})</script>
</body>
</html>

点击account—路由跳转到/account下：

再点击登录，跳转至/account/login：

改进写法

我们发现login路由是account路由下的一个子路由，形成了一个父子组件路由。VueRouter提供给我们一个属性== children ==来是实现路由的嵌套：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./lib/vue-2.4.0.js"></script><script src="https://unpkg.com/vue-router/dist/vue-router.js"></script></head><body><div id="app"><router-link to="/account">account</router-link><router-view></router-view></div><template id="temp"><div><h1>这是Account组件</h1><router-link to="/account/login">登录</router-link><router-link to="/account/register">注册</router-link><router-view></router-view></div></template><script>var account={template:'#temp'}var login={template:'<h1>登录的组件显示</h1>'}var register={template:'<h1>注册的组件显示</h1>'}var router=new VueRouter({routes: [{path:'/account',component:account,children:[{path:'login',component:login},{path:'register',component:register}]},]})var vm=new Vue({el:'#app',data:{},methods: {},router})
</script>
</body>
</html>

点击account，跳转到子路由login中：

再分别点击子路由，进入到子路由下：

注意

使用children属性实现子路由时，子路由path前面不能带/，以/ 开头的嵌套路径会被当作根路径否则会永远以根路由开始请求, 这样不方便我们调用渲染数据

应用— 实现一个经典布局

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="lib/vue-2.4.0.js"></script><script src="lib/vue-router-3.0.1.js"></script><style>html,body{margin: 0;padding: 0;}.header{background-color: orange;height:80px;}h1{margin: 0;padding: 0;font-size: 16px;}.container{display: flex;height: 600px;}.left{background-color: lightgreen;flex: 2;}.main{flex: 8;background-color: lightpink;}</style>
</head>
<body><div id="app"><router-view></router-view><div class="container"><router-view name="left"></router-view><router-view name="main"></router-view></div></div><script>var header={template:'<h1 class="header">Header头部区域</h1>'}var leftBox={template:'<h1 class="left">Left侧边栏区域</h1>'}var mainBox={template:'<h1 class="main">mainBox主体内容</h1>'}var router=new VueRouter({routes: [{path:'/',components:{'default':header,'left':leftBox,'main':mainBox}}]})var vm=new Vue({el:'#app',data:{},methods: {},router})</script>
</body>
</html>

Vue中路由嵌套（子路由）相关推荐

Vue中路由管理器Vue Router使用介绍（三）
2019独角兽企业重金招聘Python工程师标准>>> 一.路由定义添加动态参数定义 1.路由定义项,使用:xx 方式定义动态参数 {path:'/user/:id/:name', ...
vue中路由的实现原理？
vue中路由的实现原理? 1.首先需要了解一下Vue路由分为两种,一种是哈希路由,其最明显的特征是URL地址带'#'号的,其实对地址栏也就不怎么美观一点.其次是history路由也就是URL不带'#' ...
Vue Router路由嵌套
路由嵌套分析点击父级路由链接显示模板内容模板内容中又有子级路由链接点击子级路由链接显示子级模板内容默认显示点击 hello链接显示本身的组件外,还显示了自身下的子组件嵌套路由用法父路由 ...
关于Vue中路由配置和router-link的一点补充
前置知识: 1.Vue组件.单页面组件 2.目录结构关联性知识简介: 将组件和路径映射起来.主要用于单页面组件应用,即:创建了多个单页面组件,可通过vue router来进行类似页面的跳转.因为单页 ...
vue中路由跳转怎样刷新页面保证页面更新
vue中我们实现从一个页面点击某一项跳转到另外一个页面事使用在点击事件中定义 <card @click.native="viewMoreRelation(item)" :ar ...
vue中路由按需加载的几种方式
使用vue-cli构建项目后,我们会在Router文件夹下面的index.js里面引入相关的路由组件,如: import Hello from '@/components/Hello' import ...
vue中路由传参方式之二（this.$router.push进行编程式路由跳转传参）
this.$router.push进行编程式路由跳转传参 router中路由配置组件home点击传参组件homeDetails接受参数 router中路由配置 params第一种传参路由配置 {p ...
vue中路由实现的原理？
一.概念通过改变 URL,在不重新请求页面的情况下,更新页面视图. 二.实现方式更新视图但不重新请求页面,是前端路由原理的核心之一,目前在浏览器环境中这一功能的实现主要有2种方式: 1.Hash ...
解决 Vue 中路由跳转相同路径页面不刷新的问题
vue 中同一路由跳转由于不会重新执行生命周期,所以数据不更新.不管是动态路由,还是传参都不会刷新页面最简单最常用的方式是监听路由变化,在路由发生变化后执行一系列操作 watch: {$route( ...

Vue中路由嵌套（子路由）

一般写法

改进写法

注意

应用— 实现一个经典布局

Vue中路由嵌套（子路由）相关推荐

最新文章

热门文章