Vue-route路由的嵌套使用

在vue项目中往往会用到Vue route的嵌套，通过在route中添加children可以实现路由的嵌套功能。

import VueRouter from 'Vue-router'
import Vue from 'vue'//懒加载
const Home = () => import('../component/Home')
const HomeNewscom = () => import('../component/Home')
const HomeMessagescom = () => import('../component/Home')const routes = [{path : '',//重定向redirect : '/home',},{path : '/home',component : Home,//路由的嵌套children:[{path : '',//重定向redirect : 'news'},{path : 'news',component : HomeNewscom },{path : 'messages',component : HomeMessagescom }]}
]const router = new VueRouter({routes})
export default router;

Vue-route路由的嵌套使用相关推荐

【Vue】路由Router嵌套的实现及经典案例
Vue 中路由在使用的时候嵌套使用是非常频繁的,所以本文我们就来通过案例介绍一下嵌套路由的使用. Vue路由嵌套先来准备一个普通的路由案例: <!DOCTYPE html> < ...
Vue - route路由跳转
目录前言基本路由跳转 router-link 跳转路由 router.push(path) 跳转路由 router.push(name) 跳转路由嵌套路由跳转前言 vue中的route实现了从 ...
Vue中路由嵌套（子路由）
路由的嵌套就是点击一个路由地址后,继续点击,进入到另外一个路由地址下,即第二个路由就是第一个路由的子路由. 根据我们前面学习的VueRouter的知识,可以直接写出代码来实现: 一般写法 <!D ...
Vue Router 路由中 this.$router 与this.$route区别
this.$router:表示全局路由对象,里面包含属性push(),可以在任意页面实现路由跳转 this.$route:表示当前路由对象,里面包含属性name path query params等 ...
vue.js路由配置vue-router的基础学习 - 概念篇
文章目录引言 · 相关问题小结: 一.动态路由匹配 (两种情况) A. 两种情况,代码对比: B. 两种情况,效果图对比: C. 提醒 · 仔细体会: D. 优先级的问题: 二.嵌套路由引言 · ...
[Vue.js] 路由 -- 前端路由
路由的基本概念与原理路由本质是对应关系后端路由概念 : 根据不同的用户URL请求,返回不同的内容本质 : URL请求地址与服务器资源之间的对应关系 SPA 后端渲染(存在性能问题) Ajax ...
Vue笔记（四）——Vue动画路由
过渡效果过渡效果应用场景条件渲染(使用v-if) 条件展示(使用v-show) 动态组件(使用:is) 组件根节点过渡状态 opacity:0 ==> 1 enter ==>ente ...
Vue前端路由~满满的干货
文章目录目标目录路由的基本概念与原理路由后端路由 SPA(Single Page Application) 前端路由实现简易前端路由 Vue Router vue-router的基本使用 ...
Vue前端路由~非常详细哦，不要错过
下面是对Vue前端路由的整理,希望可以帮助到有需要的小伙伴~ 文章目录目标目录路由的基本概念与原理路由后端路由 SPA(Single Page Application) 前端路由实现简易前 ...

Vue-route路由的嵌套使用

Vue-route路由的嵌套使用

Vue-route路由的嵌套使用相关推荐

最新文章

热门文章