一篇文章带你了解Vue路由

什么是Vue路由

Vue路由管理的是Vue应用程序中的页面导航，它是Vue框架中的一个重要组件。在单页应用程序中，页面的切换并不会引起浏览器刷新，这一过程是通过Vue路由来完成的。

Vue路由的实现原理是在应用程序中添加观察者模式，当用户进行页面导航时，Vue路由会根据用户的请求，实时更新页面内容，并将导航历史记录添加到浏览器的历史记录中。

创建Vue路由

要使用Vue路由，需要先使用npm或yarn安装vue-router：

$ npm install vue-router --save

在Vue应用程序中引入并使用Vue路由：

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

Vue.use(VueRouter)

const router = new VueRouter({
  routes
})

在这里，我们首先通过import来引入Vue和VueRouter，然后使用Vue.use()来安装VueRouter插件，最后定义并创建一个路由对象。

这里需要注意的是，routes是一个数组，它包含了所有的路由规则。在后面的示例中，我们会使用实际的路由规则。

配置路由规则

在创建VueRouter实例时，需要通过routes参数来配置路由规则。路由规则是一个包含多个路径和相应组件的对象数组，它们定义了应用程序中每个URL路由到哪个组件。

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  { path: '/users/:userId', component: UserPage }
]

在这里，我们定义了三个路由规则，它们分别对应于应用程序中的三个页面：Home、About、UserPage。

使用路由

在Vue应用程序的模板中可以使用<router-link>标签进行路由导航，这些标签会自动渲染为链接。

<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-link to="/users/123">User page</router-link>

当用户点击这些链接时，Vue路由会自动解析出路由规则，并根据规则渲染出相应的组件。

另外，也可以通过编程方式来进行路由导航：

// JavaScript
router.push('/')
router.push({ path: '/about' })
router.push({ name: 'user', params: { id: 123 } })

// TypeScript
router.push('/')
router.push({ path: '/about' })
router.push({ name: 'user', params: { id: 123 } } as RouteLocation)

示例1：使用路由嵌套

const routes = [
  {
    path: '/',
    component: MainLayout,
    children: [
      { path: '', component: Home },
      { path: 'about', component: About },
      {
        path: 'users',
        component: Users,
        children: [
          { path: ':id', component: UserPage }
        ]
      }
    ]
  }
]

在这个示例中，我们可以看到如何使用路由嵌套。主体布局是MainLayout组件，它包含三个子组件：Home、About、Users。

在Users组件中，我们进一步定义了一个子路由规则，用于显示用户页面，它的路径参数是用户ID。

示例2：使用命名路由和路由别名

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    component: About
  },
  {
    path: '/users/:id',
    name: 'user-page',
    component: UserPage,
    // 路由别名，可以通过'/u/:id'来访问
    alias: '/u/:id'
  }
]

在这个示例中，我们为每个路由规则指定了一个名称，这样就可以通过名称来导航路由。

另外，在UserPage组件的路由规则中，我们使用了alias属性来指定一个别名，它可以用来访问相同的路由规则，例如'/u/:id'。