Vue系列vue-router的嵌套使用（四）

前言

我们希望点击导航栏不同菜单时，导航栏下方加载不同的组件，进而展示不同的页面内容，下面我们来模拟一下这个场景

一、编写两个路由子页面

Welcome页面相当于导航下方的菜单，菜单下面的两个子页面，相当于，不同的子菜单链接页面。

二、配置路由规则

代码：

{path: '/welcome',component: Welcome,children: [{path: '',redirect: 'news'},{path: 'news',component: WelcomeNews},{path: 'message',component: WelcomeMessage}]},

三、编写Welcome父页面

代码：

<template><div><h1>网站欢迎页-Hello word</h1><!--子路由 to="welcome/news" 写上完整路径--><router-link to="/welcome/news">新闻</router-link><router-link to="/welcome/message">消息</router-link><!--路由占位符--><router-view></router-view></div>
</template><script>export default {name: "Welcome"}
</script><style scoped></style>

四、效果测试

输入地址：http://localhost:8080/ 默认跳转到 http://localhost:8080/welcome/news

切换到消息页面：

Vue系列vue-router的嵌套使用（四）相关推荐

VUE系列-Vue中组件的应用(三)
大家好,我是前端岚枫,一枚二线城市的程序媛,上篇主要跟分享了<VUE系列-Vue核心应用(二)>,今天主要跟大家分享我整理的vue的组件相关的,主要包括组件声明.组件种类.组件间的几种 ...
VUE系列-Vue核心应用(二)
大家好,我是前端岚枫,一枚二线城市的程序媛,上篇主要跟分享了<Vue核心概念及特性 (一)>,今天主要跟大家分享我整理的vue的一些常用的核心应用,主要包括一些表单组件.自定义指令.修饰符 ...
vue系列--vue是如何实现绑定事件
一.前言 vuejs中的事件绑定,使用<v-on:事件名 = 函数名>来完成的,这里函数名是定义在Vue实例中的methods对象中的,Vue实例可以直接访问其中的方法. 二.事件绑定方式 ...
齐枭飞 Vue系列--vue的图片路径，和背景图片路径打包后错误解决
老实的按照官网提供的,搭建的了 webpack+vue+vuex+vue-router,,因为是自己搭建的,所以踩了不少坑,一般问题百度都有,这个背景图片的问题,查了很久才解决. 1.找到 confi ...
Vue系列vue-router的参数传递的两种方式（五）
Vue系列vue-router的参数传递的两种方式前言一.编写Profile页面二.编写App.vue入口三.路由配置,index.js 四.对比route.params方式传参五.项目中 ...
Vue笔记（天禹）后四章
文章目录 4. Vue中的Ajax 4.1. Vue脚手架配置代理 4.2. GitHub用户搜索案例 4.3. vue-resource 4.4. slot插槽 4.4.1. 默认插槽 4.4.2. ...
前端面试-Vue系列
目录有使用过vue吗?说说你对vue的理解是什么 Vue核心特性数据驱动(MVVM) 组件化指令系统 Vue跟传统开发的区别 Vue和React对比相同点区别你对SPA单页面的理解,它的 ...
【Vue路由（router）进一步详解】
Vue路由(router)进一步详解 query属性具体实例代码如下: params属性具体实例代码如下: props属性 replace属性编程式路由导航路由缓存具体代码: 总结本篇文章 ...
Vue中的router路由
目录一,vue-router路由二,vue-router路由常用配置三,vue-router路由嵌套四,vue-router路由参数传递与获取五,使用props替代路由对象获取参数六,路由 ...
5.vue知识点vue router
文章标题一.定义路由跳转的步骤 1.定义要跳转的组件 2.为组件定义路由(跳转路径) 3.将定义好的路由作为参数创建router实例 4.将创建的router实例挂载到app(根节点)上,在整个应用 ...

Vue系列vue-router的嵌套使用（四）

前言

一、编写两个路由子页面

二、配置路由规则

三、编写Welcome父页面

四、效果测试

Vue系列vue-router的嵌套使用（四）相关推荐

最新文章

热门文章