react router嵌套路由,react-router嵌套路由

　　本文主要介绍vue.js路由器的嵌套路由。通常，你访问主页，主页包含新闻/主页/新闻和信息/主页/消息。这时，你需要使用嵌套路由。具体学习一下嵌套路由的原理，有需要的朋友可以参考一下。

　　前言：

　　有时在路线中，主要部分是相同的，但下面的部分可能不同。例如，访问主页，其中包含新闻的/home/news和信息的/home/message。此时，您需要使用嵌套路由。

　　项目结构如下：

　　我们创建了三个组件，分别是Home.vue，HomeNews.vue，HomeMessage.vue，代码如下：。

　　Home.vue

　　模板

　　div class=home

　　h1主页/h1

　　Router-link to=/home/news 新闻类别/router-link //注意，完整路径必须写在这里。不能只写/新闻，要加/首页。

　　路由器链接到=/home/message 信息类/路由器链接

　　路由器视图/路由器视图

　　/div

　　/模板

　　脚本

　　导出默认值{

　　姓名：家，

　　};

　　/脚本

　　样式范围

　　/风格

　　HomeNews

　　模板

　　div class=家庭新闻

　　保险商实验所

　　李新闻1/李

　　李新闻2/李

　　李新闻3/李

　　李新闻4/李

　　/ul

　　/div

　　/模板

　　脚本

　　导出默认值{

　　名字：“家庭新闻”

　　}

　　/脚本

　　样式范围

　　/风格

　　HomeMessage

　　模板

　　div class=homeMessage

　　保险商实验所

　　消息1/li

　　消息2/li

　　消息3/li

　　消息4/li

　　/ul

　　/div

　　/模板

　　脚本

　　导出默认值{

　　名称：“HomeMessage”

　　}

　　/脚本

　　样式范围

　　/风格

　　编写完组件后，我们在router文件夹下的index.js文件中配置路由。

　　从“Vue”导入Vue；

　　从“vue-router”导入VueRouter

　　vue . use(vue router)；

　　//这里，我们还是用路由懒加载。

　　const Home=()=import(./views/Home’)

　　const HomeNews=()=import(./views/home news’)

　　const HomeMessage=()=import(./views/home message’)

　　常量路由=[

　　{

　　路径：“/home”，

　　姓名：家，

　　成分：家，

　　//写子路由的方式

　　儿童：[

　　{

　　路径：“新闻”，

　　名称：“家庭新闻”，

　　组件：家庭新闻

　　},

　　{

　　路径：“邮件”，

　　名称：“家庭消息”，

　　组件：HomeMessage

　　},

　　]

　　},

　　{

　　路径： ，

　　重定向：“主页”

　　}

　　];

　　const router=new VueRouter({

　　路线，

　　模式：“历史”，

　　});

　　导出默认路由器；

　　嵌套路由的编写非常简单。您会发现子配置是一组路由配置，就像路由配置一样。因此，您可以嵌套多层路线。

　　此时，基于上述配置，当你访问/home/时，home的出口处不会呈现任何东西。

　　这是因为没有匹配到适当的子路由。如果想要渲染点什么，可以提供一个 空的 子路由：

　　常量路由=[

　　{

　　路径：“/home”，

　　姓名：家，

　　成分：家，

　　儿童：[

　　{

　　路径：“新闻”，

　　名称：“家庭新闻”，

　　组件：家庭新闻

　　},

　　{

　　路径：“邮件”，

　　名称：“家庭消息”，

　　组件：HomeMessage

　　},

　　//添加空的子路由

　　{

　　路径： ，

　　重定向：“新闻”

　　}

　　]

　　},

　　{

　　路径： ，

　　重定向：“主页”

　　}

　　];

　　这样页面默认会重定向到新闻页面，显示新闻信息。

　　关于vue.js路由器嵌套路由的这篇文章到此为止。有关vue嵌套路由的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。