vue路由嵌套,配置children嵌套路由
2023-06-13 09:15:27 时间
嵌套路由就是路由里面嵌套他的子路由,可以有自己的路由导航和路由容器(router-link、router-view),通过配置children可实现多层嵌套
1 //mine组件
2 <template>
3 <div class="content">
4 在mine的组件里面嵌套路由
5 <router-link to="/mine/c">去到Cpage</router-link>
6 <router-link to="/mine/d">去到Dpage</router-link>
7 <div class="child">
8 <router-view></router-view>
9 </div>
10 </div>
11 </template>
1 //router.js
2 //引入需要的组件,下是我的路径
3 import Vue from 'vue'
4 import Router from 'vue-router'
5 import Home from '@/components/home'
6 import Mine from '@/components/mine'
7 import Cpage from '@/page/mine/c'
8 import Dpage from '@/page/mine/d'
9 Vue.use(Router)
10
11 export default new Router({
12 routes: [
13 {
14 path: '/',
15 redirect: 'home'
16 },
17 {
18 path: '/home',
19 name: 'home',
20 component: Home
21 },
22 {
23 path: '/mine',
24 name: 'Mine',
25 component:Mine,
26 children:[
27 {
28 path:'/',
29 component:Cpage,
30 },
31 {
32 path:'/mine/c',
33 component:Cpage,
34 },
35 {
36 path:'/mine/d',
37 component:Dpage,
38 }
39 ]
40 //children这是嵌套的部分
41 },
1 //c.vue
2 <template>
3 <div class="top-80">
4 c.vue
5 <p>这里Cpage文件</p>
6 </div>
7 </template>
8
9
10 //d.vue
11 <template>
12 <div class="top-80">
13 d.vue
14 <p>这里Dpage文件</p>
15 </div>
16 </template>
嵌套路由通过配置children可实现多层嵌套,其它规则写法一样;
相关文章
- 在Vue使用NProgress加载进度条
- 记录一次jenkins 部署vue 项目的问题及解决方法
- VUE 路由入门
- Vue自定义指令&键盘修饰符
- vue(17)vue-route路由管理的安装与配置
- html使用vue axios,使用 Vue和axios
- K8s nginx-ingress 如何配置二级目录转发远程静态服务器基于Vue路由history模式打包的应用程序
- Java项目分享-基于 SpringBoot + Vue 的智能停车场管理平台
- Vue刷新页面的三种方式[通俗易懂]
- vue-router实现路由懒加载( 动态加载路由 )_前端懒加载原理
- vue中的懒加载和按需加载_vue 路由懒加载
- Vue和vue全家桶有什么区别_Vue和vue全家桶有什么区别
- Vue路由传参的两种方式
- Vue富文本编辑器-Ckeditor4
- 私活神器!!SpringBoot+Vue企业级支付系统!附源码!
- Vue路由嵌套控制台发出警告Named Route ‘Home‘ has a default child route. When navigating to this named route (:to
- vue路由守卫
- vue嵌套路由子路由 path 注意
- Vue使用百度地图
- Vue值Router(路由)2
- 4. 「vue@2.6.11 源码分析」new Vue() 整体流程和组件渲染之前的准备工作
- WebStorm配置Vue开发环境详解编程语言
- Vue用Redis储存获取数据(vue获取redis)
- Vue搭配Redis做针对性取值(vue redis取值)
- Oracle与Vue官网联合宣传前瞻技术,轻松开发(oracle vue官网)