【Vue】路由Router嵌套的实现及经典案例

Vue 中路由在使用的时候嵌套使用是非常频繁的，所以本文我们就来通过案例介绍一下嵌套路由的使用。

Vue路由嵌套

先来准备一个普通的路由案例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.4.3/vue-router.min.js"></script>
</head>
<body><div id="app"><router-link to="/login" >登录</router-link><router-link to="/register">注册</router-link><router-view></router-view></div><script>// 创建两个子组件 模板对象var login = {template: "<h3>登录模块</h3>"}var register = {template: "<h3>注册模块</h3>"}// 创建路由对象var routerObj = new VueRouter({// 配置路由规则routes:[{path:"/",redirect:"/login"},{path: "/login" , component: login},{path: "/register" , component: register}]})var vm = new Vue({el: "#app",data: {},methods: {},router:routerObj})</script>
</body>
</html>

接下来我们看下 嵌套路由 的实现。

1、添加两个组件模板

var newc = {template:'<h2>新用户登录</h2>'
}
var oldc = {template:'<h2>老用户登录</h2>'
}

2、修改登录组件

我们在登录组件中再嵌套一个路由模块，因为内容比较多，所以我们把这个 template 提取出来。

3、路由 children 使用

接下来我们需要配置嵌套的路由，具体如下：

注意：通过 children 配置的 path 中的路由地址不能加 “/” 开头。

实现效果：

路由经典案例

学完了路由嵌套的基础知识，接下来我们通过Router来实现一个经典页面布局的案例，效果如下：

完整代码：

<!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="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.4.3/vue-router.min.js"></script><style>*{margin: 0px;padding: 0px;} .header{font-size: 40px;height: 70px;background-color: salmon;}.contain{height: 600px;display: flex;}.left{background-color: seagreen;flex: 1;}.right{background-color: pink;flex: 9;}.left > div{height: 50px;border-bottom:1px solid #fff;text-align: center;line-height: 50px;cursor: pointer;color:#fff;}</style>
</head>
<body><div id="app"><div class="header">看点资讯</div><div class="contain"><div class="left"><div><router-link to='/user'>用户管理</router-link></div><div><router-link to='/article'>文章管理</router-link></div></div><div class="right"><router-view></router-view></div></div></div><script>// 组件let user = {template:'<div>用户管理模块</div>'}let article = {template:'<div>文章管理模块</div>'}// router 路由对象let router = new VueRouter({routes:[{path:"/",redirect:"/login"},{path:'/user',component:user},{path:'/article',component:article}]})new Vue({el:'#app',data: { } ,methods: { },router,//注册路由})</script>
</body>
</html>

【Vue】路由Router嵌套的实现及经典案例相关推荐

vue路由router的props配置
vue路由router的props配置前置知识:vue-router3路由配置和使用,适配vue2,vue-router代码模版路由props配置的作用:让路由组件更方便的接收到参数 ⚠️ 当不使 ...
vue路由-router
VueRouter基础 vue路由的注册导入 <script src="https://unpkg.com/vue-router/dist/vue-router.js"&g ...
Vue 路由router的两种模式
两种模式 vue中router可以设两种模式:hash和history.设置方式就是代码中注释的部分. import Vue from 'vue' import Router from 'vue-ro ...
Vue路由设置嵌套（一级二级三级展示并且显示定向选中）
router.js import Vue from 'vue' import Router from 'vue-router' // 引入页面一级 import Home from './views/ ...
Vue路由-Router搭建以及简单使用
一.VueRouter介绍 1.所谓的路由就是根据用户不同的访问地址,应用程序给与不同的响应,VueRouter就是官方的路由管理器. 二.配置路由(如果在创建项目的时候没有选择vue-router ...
单页vue路由router
Vue.js + vue-router 可以很简单的实现单页应用. <router-link> 是一个组件,该组件用于设置一个导航链接,切换不同 HTML 内容. to 属性为目标地址, ...
vue——路由router
点击页面中的导航链接不会刷新页面,只会做页面的局部更新 1.安装vue-router 执行 npm i vue-router@3命令注意版本 vue2--vue-router3:vue3--vue- ...
vue项目创建步骤和路由router知识点
菜单快捷导航: vue项目创建 vue路由router知识点(路径参数.查询参数.命名路由.嵌套路由.命名视图.hash/history模式) vue导航守卫(全局守卫.单个路由独享.组件级守卫) 1 ...
vue 刷新嵌套路由_vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法...
解决vue-router嵌套路由(子路由)在history模式下刷新无法渲染页面的问题,具体内容如下一. 异常描述本来使用的是vue-router的hash模式,但是hash模式下url需要带&q ...