vue-router菜鸟进阶！(嵌套路由VS命名路由)

最新推荐文章于 2025-06-01 23:34:41 发布

AprilCC

最新推荐文章于 2025-06-01 23:34:41 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端框架

本文链接：https://blog.youkuaiyun.com/AprilCC/article/details/78491300

前端框架专栏收录该内容

19 篇文章

订阅专栏

本文详细介绍了Vue Router的嵌套路由和命名路由概念。嵌套路由允许组件内部拥有自己的<router-view>进行层级展示，通过children配置实现。注意全路径开始的嵌套路由表示根路径。命名路由则提供了通过名称标识路由的便利，方便在链接和路由跳转时使用，可通过to属性的对象形式在router-link和router.push()中引用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

嵌套路由

一个被渲染组件可以包含自己的嵌套< router-view >。

要在嵌套的出口中渲染组件，需要在VueRouter的参数中使用children配置：

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <p>
    <router-link to="/user/foo">/user/foo</router-link>
    <router-link to="/user/foo/profile">/user/foo/profile</router-link>
    <router-link to="/user/foo/posts">/user/foo/posts</router-link>
  </p>
  <router-view></router-view>
</div>

const User = {
  template: `
    <div class="user">
      <h2>User {{ $route.params.id }}</h2>
      <router-view></router-view>
    </div>
  `
}

const UserHome = { template: '<div>Home</div>' }
const UserProfile = { template: '<div>Profile</div>' }
const UserPosts = { template: '<div>Posts</div>' }

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User,
      children: [
        // UserHome will be rendered inside User's <router-view>
        // when /user/:id is matched
        { path: '', component: UserHome },

        // UserProfile will be rendered inside User's <router-view>
        // when /user/:id/profile is matched
        { path: 'profile', component: UserProfile },

        // UserPosts will be rendered inside User's <router-view>
        // when /user/:id/posts is matched
        { path: 'posts', component: UserPosts }
      ]
    }
  ]
})

const app = new Vue({ router }).$mount('#app')

要注意，以 / 开头的嵌套路径会被当作根路径。这让你充分的使用嵌套组件而无须设置嵌套的路径。

命名路由

有时候，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。可以在创建Router实例的时候，在routes配置中给某个路由设置名称。

const router = new VueRouter({
    routes: [
        {
            path: '/user/:user:id',
            name: 'user',
            component: User
        }
    ]
})

要链接到一个命名路由，可以给router-link的to属性传一个对象：

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

跟代码调用 router.push()是一回事：

router.push({ name: 'user', params: { userId: 123 }})

这两种方式都会把路由导航到/user/123路径。

For example:

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const Home = { template: '<div>This is Home</div>' }
const Foo = { template: '<div>This is Foo</div>' }
const Bar = { template: '<div>This is Bar {{ $route.params.id }}</div>' }

const router = new VueRouter({
    mode: 'history',
    base: __dirname,
    routes: [
        { path: '/',  name: 'home', component: Home },
        { path: '/foo', name: 'foo', component: Foo },
        { path: '/bar', name: 'bar', component: Bar }
        ]
    })

new Vue({
    router,
    template: `
        <div id="app">
            <h1>Named Routes</h1>
            <p>Current route name: {{ route.name }}</p>
            <ul>
                <li><router-link :to="{ name: 'home' }">Home</router-link></li>
                <li><router-link :to="{ name: 'foo' }">foo</router-link></li>
                <li><router-link :to="{ name: 'bar', params: { id: 123 }}">bar</router-link></li>
            </ul>
            <router-view class="view"></router-view>
        </div>
    `
}).$.mount('#app')