Vue路由vue-router用法讲解

首先需要明确的是Vue Router是Vue.js官方的路由管理器，用于实现单页应用（SPA）的路由功能。下面我将详细讲解Vue Router的用法。

一、Vue Router的基本使用

1. 安装

使用Vue Router需要先安装它。可以通过以下命令行安装最新版本的Vue Router：

npm install vue-router

安装完成后，在需要使用Vue Router的文件中引入它：

import VueRouter from 'vue-router'
Vue.use(VueRouter)

2. 配置路由

要使用Vue Router，需要先创建一个Vue Router实例，并将其配置传递给Vue实例。可以在Vue Router实例的routes属性中定义路由列表：

const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
    { path: '/contact', component: Contact }
  ]
})

上面的代码中定义了三个路由页面的路径和对应的组件。其中，Home、About和Contact是定义好的组件。

3. 显示路由页面

要在Vue应用中显示路由页面，在Vue实例中指定一个<router-view>组件即可：

<router-view></router-view>

Vue会根据当前的路由路径自动显示相应的路由组件。

4. 路由跳转

要在Vue应用中进行路由跳转，可以使用<router-link>组件或者$router对象。

使用组件

<router-link>组件会自动渲染成一个<a>标签，可以指定它的to属性来跳转到指定的路由路径：

<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-link to="/contact">Contact</router-link>

使用$router对象

在Vue组件中可以使用$router对象进行路由跳转。例如，在一个按钮的点击事件中跳转到指定的路由路径：

methods: {
  handleClick() {
    this.$router.push('/about')
  }
}

二、示例1：路由带参数的情况

有时候需要在路由跳转的同时传递参数。例如，我们需要跳转到用户详情页面，并显示对应的用户信息。这时候就需要在路由跳转时传递用户ID参数。

下面是示例代码：

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

// 在组件中使用$route参数获取路由参数
export default {
  mounted() {
    console.log(this.$route.params.id)
  }
}

上面的代码中，我们在路由定义中使用了带参数的路由，使用冒号定义了一个动态的参数，可以匹配任何名称的参数。组件中需要使用$route属性来获取路由参数。

在跳转到包含参数的路由时，可以使用以下代码：

<router-link :to="{ path: '/user/' + userId }">用户详情</router-link>

三、示例2：路由嵌套的情况

有时候需要在路由中创建子路由，用于实现页面的嵌套。例如，在一个博客网站中，需要显示文章列表页面和文章详情页面，以及在文章详情页面中嵌套显示评论列表页面。

下面是示例代码：

const router = new VueRouter({
  routes: [
    {
      path: '/articles',
      component: ArticleList
    },
    {
      path: '/article/:id',
      component: ArticleDetail,
      children: [
        {
          path: 'comments',
          component: CommentList
        }
      ]
    }
  ]
})

上面的代码中，我们在ArticleDetail组件中创建了子路由，用于显示评论列表页。可以使用以下代码在ArticleDetail组件中显示子路由：

<router-view></router-view>

可以使用以下代码跳转到包含子路由的页面：

<router-link :to="{ path: '/article/' + articleId + '/comments' }">评论列表</router-link>

以上就是Vue Router的基本用法和两个示例说明。通过Vue Router，可以轻松实现复杂的路由功能，并且可以实现页面嵌套和路由参数传递等功能。