Vue路由router详解

什么是路由

路由指的是根据不同的URL地址展示不同的页面内容，Vue Router是Vue.js官方的路由管理器。使用Vue Router可以很方便地实现单页面应用程序（SPA）中的多视图管理。

安装

安装Vue Router很简单，在Vue CLI中提供了预设的脚手架模板供使用者选择，其中就包括了Vue Router功能。

步骤如下：
1. 通过npm安装vue-router：npm install vue-router --save
2. 在main.js中进行引入并注册：
```
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)
3. 配置路由：创建`router.js`：
import VueRouter from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'

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

const router = new VueRouter({
routes // （缩写）相当于 routes: routes
})

export default router
4. 在`main.js`中引入并挂载路由：
import Vue from 'vue'
import App from './App.vue'
import router from './router.js'

new Vue({
router,
render: h => h(App)
}).$mount('#app')
```

Vue Router的基本用法

路由配置

在router.js中配置路由，一个路由由以下三部分组成：
1. path：路径，对应的是浏览器地址栏中的URL
2. component：组件，对应的是当前路径展示的组件
3. name（可选）：用于标识路由，方便在代码中进行跳转

示例：

const routes = [
  {
    path: '/',
    component: Home,
    name: 'home'
  },
  {
    path: '/about',
    component: About,
    name: 'about'
  }
]

路由跳转

路由跳转的两种方式：
1. 声明式跳转（标签式）：使用<router-link>标签配合to属性进行导航
<router-link to="/">首页</router-link>
2. 编程式跳转：使用$router对象的push或replace方法进行导航
// push方法
this.$router.push({ path: '/' })
// replace方法
this.$router.replace('/about')

动态路由

路径中带有参数的路由称为动态路由，可以通过:参数名来指定参数，参数可以在$route.params对象中获取。

示例：

// 路由配置
{
  path: '/user/:id',
  component: User,
  name: 'user'
}
// 编程式导航
this.$router.push({ name: 'user', params: { id: 1 }})
// 组件中获取参数
this.$route.params.id

嵌套路由

路由可以进行嵌套，一个组件可以包含多个子组件来展示不同的子路由。

示例：

// 路由配置
{
  path: '/user',
  component: User,
  children: [
    {
      path: 'profile',
      component: UserProfile
    },
    {
      path: 'posts',
      component: UserPosts
    }
  ]
}
// 编程式导航
this.$router.push('/user/profile')
// 组件中展示子路由
<router-view></router-view>

示例代码

声明式跳转

<template>
  <div>
    <router-link to="/">首页</router-link>
    <router-link to="/about">关于我们</router-link>
  </div>
</template>

编程式跳转

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

总结

Vue Router是Vue.js官方带有路由管理功能的插件。在使用中，需要进行路由的配置，可以使用声明式和编程式两种方式进行跳转。动态路由和嵌套路由是Vue Router的进阶用法，可以更加灵活地进行前端路由配置。