vue-router之嵌套路由

❤记在前面

“自己”这个东西是看不见的，撞上一些别的什么，反弹回来，才会了解自己。

跟很强的东西、可怕的东西、水准很高的东西相碰撞，才知道“自己”是什么，这才是自我。

——山本耀司

一、嵌套路由的适用场景

大家都知道选项卡，在选项卡中，顶部有数个导航栏，中间的主体显示的是内容；这个时候，整个页面是一个路由，然后点击选项卡切换不同的路由来展示不同的内容，这个时候就是路由中嵌套路由。

二、具体实现

①我们先在view文件夹下新建一个title1.vue和title2.vue用来存放不同的内容

title1.vue

title2.vue

②在router->index.js中将这上面两个新建的组件引入进来并填写路径，这里的title1和title2是作为test.vue页面的子路由，所以要写在children属性下（提醒：这里填写children子路由的path不要加 /）

③再去test.vue中输入：

提醒：在to后面写路由路径的时候，一定要带上绝对路径，也就是要把test这个父路由路径写进去 “/test/title1”

④运行项目(cnpm run dev)

⑤最后，进入浏览器点击不同的标题就可以看到不同内容的展示：

以上，完成，坚持~~~

转载于:https://www.cnblogs.com/crystral/p/9094563.html

vue-router之嵌套路由相关推荐

Vue Router系列之路由懒加载
文章の目录一.具体需要 3 步: 1.安装 `@babel/plugin-syntax-dynamic-import` 包. 2.在 babel.config.js 配置文件中声明该插件. 3.将路 ...
Vue Router系列之路由重定向
文章の目录一.什么是路由重定向二.示例写在最后一.什么是路由重定向路由重定向指的是:用户在访问地址 A 的时候,强制用户跳转到地址 C,从而展示特定的组件页面:通过路由规则的 redirec ...
Vue Router 路由管理
文章目录 Vue Router 路由管理概述安装简单使用定义2个组件定义路由信息支持路由使用路由动态路由配置动态路由配置404 限制动态参数嵌套路由命名路由编程式导航简单使 ...
Vue Router 实现路由控制实战
本文是我在学习过程中记录学习的点点滴滴,目的是为了学完之后巩固一下顺便也和大家分享一下,日后忘记了也可以方便快速的复习. Vue Router 实现路由控制实战前言一.什么是单页面应用及实现前端路 ...
vue刷新页面如何保证路由不变_vue 刷新之后嵌套路由不变重新渲染页面的方法...
vue 刷新之后嵌套路由不变重新渲染页面的方法解决嵌套路由刷新时,路由没有变化,正常情况下页面是不会重新渲染的 1.在router-view中加上条件渲染 v-if 默认为true.让它显示出来 ...
Vue Router路由常用功能总结
Vue Router路由常用功能总结一.前言二.安装 1. vueCLI安装 2. npm安装三.路由配置及使用: 1. 基本配置: 2. 动态路由: 3. 嵌套路由: 四.编程式的导航五.重 ...
Vue 学习(十、 Vue Router - 路由插件和 Vue 的插件原理)
文章目录一.Vue Router - 路由插件 1. 安装 Vue Router 2. Vue Router 路由的基本使用 3. 设置 router-link 4. 编程式路由 5. 路由嵌套 6 ...
使用React Router v4的嵌套路由
React Router v4 introduced a new declarative, component based approach to routing. With that approac ...
vue-router和react-router嵌套路由layout配置方案的区别
最近在学习react,在路由这一块有点看不懂,第一感觉是灵活性很大,想怎么来就怎么来,但问题也来了,稍微复杂一点就GG了,不如vue的傻瓜式配置来的方便. 先说一下vue的路由配置方式,目录结构如下( ...
Vue开发之基础路由
Vue开发之基础路由 1.router-link和router-view组件 src/App.vie文件内容: <template><div id="app"&g ...

vue-router之嵌套路由

vue-router之嵌套路由相关推荐

最新文章

热门文章