vue路由嵌套,配置children嵌套路由
本篇文章给大家谈谈vue嵌套路由能遍历吗，以及vue路由嵌套,配置children嵌套路由对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。
本文目录一览：
1、Vue-Router（三）：嵌套路由
2、vue2.0如何嵌套路由？子路由怎么配置
3、Vue 默认路由 与路由嵌套
4、Vue怎么做实现路由跳转和嵌套
Vue-Router（三）：嵌套路由
简单地说，就是路由的套娃，一层一层往下套，理论上是没有上限的，只是一般都不会嵌套太多层。
使用嵌套路由的地方一般是用户中心、管理后台等。一级路由进入左面的功能菜单，右面是二级路由的空间。
┌──────────────┐
│用户中心│
├───────┬──────┤
│功能菜单│二级路由 │
│模块一│区域 │
│模块二│ │
││ │
││ │
││ │
└───────┴──────┘
大概就是这个意思。
跳转的设置没什么特别的，都可以用。
只是这里有一个默认二级路由，一般跳到一级路由的时候只会指定一级的名称，比如 这里的crud2，但是这时候二级路由是不会打开的，因为没有指定二级路由。
这时候可以通过一个默认二级路由来设置，避免空白的现象。
比如这里的 { path: '', component: UserHome } 我们可以在这里设置一个默认打开的二级路由的组件。
vue2.0如何嵌套路由？子路由怎么配置
我们先来解决上一次的tab路由切换效果激动class的问题!我们不想让它点击其它路由链接的时候第一个的路由class处于激活状态.首先我们修改下min.js里面的路由配置文件.加上首页路由组件配置.红色圈的地方意思是,默认进来显示的路由路径,还有一个就是直接配置默认的路由路径,其实指向的都是同一个组件.
第二步,将导航的路由改动下.这里要注意的是,第一个router-link to不在是直接指向"/"了,而是"/home".然后我们在第一个路由内容的DIV上加一个动态class.用来判断当前的路由路径.写一个三元表达式.$route是一个路由对象,所有的路由都被存在这个对象当中.我们只需要进行判断当前路由是否指向home这个组件.如果是的话加上一个router-link-active如果不是的话就为空class.效果见第二张,第三张图片.
此时一个完整的路由切换效果就完成了.接下来就分享下嵌套路由是怎么弄的!首先找到min.js路由 配置文件.比如我们在home组件里加一个嵌套路由chi组件.首先要先创建这个chi组件,然后引入到min.js文件中.然后在home路由的里面加上children这个方法.这样,一个嵌套的子路由就配置好了.
到这里,在home组件中写一个入口进入这个嵌套的路由组件中去.嵌套路由点击进去,会进入到之前写好的chi.vue组件中去.
点击之后,就会显示.home里面的chi组件.并且显示chi组件中的内容
Vue 默认路由 与路由嵌套
在Vue项目里，路由组件需要通过router-link进行加载
不手动点击router-link则无法访问路由组件，那么需要设置被访问的路由组件为默认路由
Vue怎么做实现路由跳转和嵌套
在实际项目中我们会碰到多层嵌套的组件组合而成，但是我们如何实现嵌套路由呢？因此我们需要在 VueRouter 的参数中使用 children 配置，这样就可以很好的实现路由嵌套。
index.html，只有一个路由出口
[html] view plain copy
div id="app"
!-- router-view 路由出口, 路由匹配到的组件将渲染在这里 --
router-view/router-view
/div
main.js，路由的重定向，就会在页面一加载的时候，就会将home组件显示出来，因为重定向指向了home组件，redirect的指向与path的必须一致。children里面是子路由，当然子路由里面还可以继续嵌套子路由。
[html] view plain copy
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
//引入两个组件
import home from "./home.vue"
import game from "./game.vue"
//定义路由
const routes = [
{ path: "/", redirect: "/home" },//重定向,指向了home组件
{
path: "/home", component: home,
children: [
{ path: "/home/game", component: game }
]
}
]
//创建路由实例
const router = new VueRouter({routes})
new Vue({
el: '#app',
data: {
},
methods: {
},
router
})
home.vue，点击显示就会将子路由显示在出来，子路由的出口必须在父路由里面，否则子路由无法显示。
[html] view plain copy
template
div
h3首页/h3
router-link to="/home/game"
button显示tton
/router-link
router-view/router-view
/div
/template
game.vue
[html] view plain copy
template
h3游戏/h3
/template
运行后的结果：
点击显示后：
vue嵌套路由能遍历吗的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于vue路由嵌套,配置children嵌套路由、vue嵌套路由能遍历吗的信息别忘了在本站进行查找喔。
