详解Vue-router嵌套路由

目录
  • 步骤
    • 1.配置路由规则，使用children配置项：
    • 2.跳转（要写完整路径）：
  • 总结

步骤

1.配置路由规则，使用children配置项：

routes:[
	{
		path:'/about',
		component:About,
	},
	{
		path:'/home',
		component:Home,
		children:[ //通过children配置子级路由
			{
				path:'news', //此处一定不要写：/news
				component:News
			},
			{
				path:'message',//此处一定不要写：/message
				component:Message
			}
		]
	}
]

2.跳转（要写完整路径）：

   <router-link to="/home/news">News</router-link>

分析代码

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!

赞 (0)

相关推荐

  • 全面解析vue router 基本使用(动态路由，嵌套路由)

    路由,其实就是指向的意思,当我点击页面上的home按钮时,页面中就要显示home的内容,如果点击页面上的about 按钮,页面中就要显示about 的内容.Home按钮  => home 内容, about按钮 => about 内容,也可以说是一种映射. 所以在页面上有两个部分,一个是点击部分,一个是点击之后,显示内容的部分. 点击之后,怎么做到正确的对应,比如,我点击home 按钮,页面中怎么就正好能显示home的内容.这就要在js 文件中配置路由. 路由中有三个基本的概念 route,

  • vue-router实现嵌套路由的讲解

    vue-router实现嵌套路由的讲解

    一.嵌套路由(配置好父路由component后,在父路由下面添加children属性来配置这个父路由的子路由) 需要注意的是:父组件中的<router-view></router-view>是子组件的占位符是必不可少的 嵌套路由的现象:点击了路由跳转之后父路由组件的内容一直呈现:子路由的内容进行切换,地址栏的路径也随之改变. // 嵌套路由 { path: '/nest', component: () => import('@/nest/nest'), // 嵌套路由的关键字

  • 讲解vue-router之什么是嵌套路由

    讲解vue-router之什么是嵌套路由

    上一次给大家简单说了下什么是动态路由现在我们来讲讲嵌套路由. GitHub:https://github.com/Ewall1106/mall 1.嵌套路由的使用场景是什么呢? 大家都知道选项卡,在选项卡中,顶部有数个导航栏,中间的主体显示的是内容:这个时候,整个页面是一个路由,然后点击选项卡切换不同的路由来展示不同的内容,这个时候就是路由中嵌套路由. 2.具体是怎么实现的? ① 为了演示,我们现在view文件夹下新建一个title1.vue和title2.vue用来存放不同的内容 title1

  • vue.js Router中嵌套路由的实用示例

    前言 随着 Vue.js 单页应用(SPA)变得相当复杂,你开始需要 Vue 路由以及嵌套路由.嵌套路由允许更复杂的用户界面以及相互嵌套的组件.让我们创建一个相对简单的用例,来展示 Vue Router 中嵌套路由的实用性. 用 Vue CLI 进行设置 如果尚未安装,请运行以下命令全局安装 Vue CLI: $ npm install -g @vue/cli 或者 $ yarn global add @vue/cli 现在你能从命令行运行 vue 命令了.让我们创建一个名为 alligator

  • vue.js Router嵌套路由

    vue.js Router嵌套路由

    前言: 有时候在路由中,主要的部分是相同的,但是下面可能是不同的.比如访问首页,里面有新闻类的/home/news,还有信息类的/home/message.这时候就需要使用到嵌套路由. 项目结构如下: 我们创建了3个组件,分别是Home.vue,HomeNews.vue,HomeMessage.vue,代码如下: Home.vue <template> <div class="home"> <h1>Home</h1> <router

  • 解决vue-router 嵌套路由没反应的问题

    先看下route.js //route.js const App = () => import('../App.vue'); const Login = () => import('../component/Login.vue'); const Class = () => import('../component/Class.vue'); const CourseList = () => import('../component/CourseList.vue'); const Co

  • vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法

    vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法

    解决vue-router嵌套路由(子路由)在history模式下刷新无法渲染页面的问题,具体内容如下 一. 异常描述 本来使用的是vue-router的hash模式,但是hash模式下url需要带"#"符号,不仅看起来不舒服,而且有些场景下是会破坏路由中的"#"(微信分享页面就会把"#"后边的内容处理掉),所以就需要使用history模式,然后就让后端改下nginx配置: location / { try_files $uri $uri/ /in

  • Vue Router嵌套路由(children)的用法小结

    Vue Router嵌套路由(children)的用法小结

    目录 简介 使用场景 官网网址 示例 路由配置 用户页面(父页面) 子路由的path前加“/” 简介 说明 本文介绍Vue Router的嵌套路由的用法. 嵌套路由就是父路由里面嵌套他的子路由,父路由有自己的路由导航和路由容器(router-link.router-view),通过配置children可实现多层嵌套.(router-view必须要有,否则点击了router-link后,路径会变化,但页面不改变). 使用场景 嵌套路由用于实现页中页效果.例如: 用户页面中,有登录页面和注册页面,这

  • 详解Vue.js搭建路由报错 router.map is not a function

    详解Vue.js搭建路由报错 router.map is not a function

    错误: 出现问题原因:2.0已经没有map这个方法了,只有1.0兼容该方法. 解决方法: (1)方法1:使用命令npm install vue-router@0.7.13兼容1.0版本vue. 在代码中的使用方法: (2)解决方法2:基于vue2.0,写对应的方法. 具体用法如下图: 注:1.0和2.0在一些用法上有比较大的差别,用的时候需要注意. 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们.

  • 详解Vue router路由

    详解Vue router路由

    目录 1.基本使用 2.几个注意点 3.多级路由(多级路由) 4.路由的query参数 5.命名路由 6.路由的params参数 7.路由的props配置 8.编程式路由导航 9.缓存路由组件 总结 1.基本使用 2.几个注意点 3.多级路由(多级路由) 4.路由的query参数 5.命名路由 例如像三级目录 ,每次写都需要带上一二级目录,比较麻烦,采用命名路由可以用name直接找到 6.路由的params参数 1)在配置路由的时候需要先声明接收params参数,即先占位 2) 7.路由的pro

  • 详解vue route介绍、基本使用、嵌套路由

    详解vue route介绍、基本使用、嵌套路由

    目录 前言 一.介绍.安装 1.定义 2.安装 二.基本使用(代码后赋) 三.嵌套路由 1.布局逻辑 2.效果展示 3.代码 四.注意 前言 想要学习完整内容请关注主页的专栏————>Vue学习 本次的代码段是结合体,被我分开发文,我以在看代码段时,已经截图展示,所看部分 一.介绍.安装 1.定义 vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用. 路由:route 一组key-v的对应关系(路径的改变对应的组件进行切换) 路由器:route

  • 详解vue路由

    前端路由和后端路由: 后端路由:对于普通的网站,所有的超链接都是url地址,所有url都对应服务器上对应的资源 前端路由:对于单页面应用程序来说,主要通过url的hash(#)来实现不同页面的切换,同时hash还有一个特点HTTP请求中不会包含hash相关的内容,所以单页面程序中的页面跳转主要用hash实现 在单页面应用程序中这种通过hash来改变页面的方式称作前端路由区别于后端路由 路由的使用 1.创建一个路由对象,当导入vue-router包之后,在window全局对象中就有一个路由的构造函

  • 详解vue中$router和$route的区别

    详解vue中$router和$route的区别

    我们在 vue 项目中一般都会用到路由,而 vue-router 是 vue.js 官方的路由管理器. this.$route:当前激活的路由的信息对象.每个对象都是局部的,可以获取当前路由的 path, name, params, query 等属性. this.$router:全局的 router 实例.通过 vue 根实例中注入 router 实例,然后再注入到每个子组件,从而让整个应用都有路由功能.其中包含了很多属性和对象(比如 history 对象),任何页面也都可以调用其 push(

  • 详解vue 路由跳转四种方式 (带参数)

    1.  router-link 1. 不带参数 <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name // 注意:router-link中链接如果是'/'开始就是从根路由开始,如果开始不带'/',则从当前路由开始. 2.带参数 <router-link :to="{name:'home', para

  • 详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结

    如果你发现你自己需要在 Vue 中做一次强制更新,99.9% 的情况,是你在某个地方做错了事. 1. Vue 无法检测实例被创建时不存在于 data 中的 property 原因:由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化,所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的. 场景: var vm = new Vue({ data:{}, // 页面不会变化 template: '<div>{{message}

随机推荐