欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

vue嵌套路由与404重定向实现方法分析_vue.js

程序员文章站 2022-04-10 21:32:14
...
这次给大家带来怎样使用vue嵌套路由,使用vue嵌套路由的注意事项有哪些,下面就是实战案例,一起来看一下。

第一部分: vue嵌套路由

嵌套路由是什么?

嵌套路由就是在一个被路由过来的页面下可以继续使用路由,嵌套也就是路由中的路由的意思。 比如在vue中,我们如果不使用嵌套路由,那么只有一个<router-view>,但是如果使用,那么在一个组件中就还有<router-view>,这也就构成了嵌套。

为什么要使用嵌套路由?

就比如在一个页面中, 在页面的上半部分,有三个按钮,而下半部分是根据点击不同的按钮来显示不同的内容,那么我们就可以在这个组件中的下半部分看成是一个嵌套路由,也就是说在这个组件的下面需要再来一个<router-view>, 当我点击不同的按钮时,他们的router-link分别所指向的组件就会被渲染到这个<router-view>中。

官网是怎么介绍的?

每次说到官网,就要说一说百度,百度搜索千万别用。。

vue嵌套路由与404重定向实现方法分析_vue.js

要说官网举得这个图,本意是好的,但是描述起来累赘太多。吐个槽。。

这就是实际生活中的一个很好的应用界面, 通常是由多层嵌套的组件组合而成。 同样的, URL中各段动态路径也按照某种结构对应嵌套的各层组件。如上所示。

即user表示用户页, 而user就可以看成是vue中的一个单页面,对于一个user,一定要有哪一个用户,这里的foo(小明、小红)就代表了一个用户,这里的profile可以理解为个人主页,这里的posts可以理解为这个人所发表的文章, 而title可能是不变的,比如无论切换到这个人发表的文章,还是切换到这个人的个人主页,我们都希望在最上方显示同样的东西,而在切换的时候换的就是下面的部分,这个部分我们就可以用<router-view>来写,那么,这,就是嵌套路由。

借助vue-router,使用嵌套路由配置,就可以很简单的表达这种关系。

<p id="app">
 <router-view></router-view>
</p>
const User = {
 template: `
  <p class="user">
   <h2>User {{ $route.params.id }}</h2>
   <router-view></router-view>
  </p>
}
const router = new VueRouter({
 routes: [
  { path: '/user/:id', component: User,
   children: [
    {
     // 当 /user/:id/profile 匹配成功,
     // UserProfile 会被渲染在 User 的 <router-view> 中
     path: 'profile',
     component: UserProfile
    },
    {
     // 当 /user/:id/posts 匹配成功
     // UserPosts 会被渲染在 User 的 <router-view> 中
     path: 'posts',
     component: UserPosts
    },
    // 当 /user/:id 匹配成功,
    // UserHome 会被渲染在 User 的 <router-view> 中
    {
      path: '',
      component: UserHome
    },
     // ...其他子路由
   ]
  }
 ]
})

OK! 这大致就是嵌套路由了! 其中,第一段代码是在文件中放了<router-view>, 这是最顶层的出口,渲染高级路由匹配到的组件。

从路由配置中,我们可以看到: 当路径是 /user/小明 或者 /user/小红 时, 就会把User渲染到页面中,这个渲染的就是*路由。 (:id就是小明、小红,)。 然后这个页面中就有一个嵌套路由,当然,如果url就是 /user/小明的话,那么这个二级路由是什么都不会显示的, 如果我们希望即使只是 /user/小明, 也得渲染点什么,那么我们就可以设置 path: "" 所对应的路由,这样,即使 /user/小明 也是可以显示更多的了。

如果我们想看小明的个人主页,就是 /user/小明/profile 这时就会把 UserProfile 组件渲染到这个二级路由中了。

如果我们想看小明发表的文章,就是 /user/小明/posts 这时就会把 UserPost 组件渲染到这个二级路由中, 这也就是二级路由了。

其实概念就这么多,是不是很简单呢!

相信看了本文案例你已经掌握了方法,更多精彩请关注其它相关文章!

推荐阅读:

如何使用vue注册组件

H5中data-*属性使用方法汇总

以上就是vue嵌套路由与404重定向实现方法分析_vue.js的详细内容,更多请关注其它相关文章!