Vue.js路由vue-router使用方法详解

Vue.js是现代前端开发的新宠儿。其中路由是Vue.js中的一个重要组成部分。Vue-Router（vue-router）是Vue.js官方提供的一个Vue.js路由管理器，它和Vue.js框架深度集成，是构建单页Web应用程序的重要基础库之一。在这里，我们将详细讲解vue-router的使用方法。

1. 安装vue-router

在使用Vue.js时，需要首先安装vue-router。可以使用npm进行安装：

npm install vue-router

1. 引入vue-router

安装vue-router后，需要在Vue.js应用程序中引入vue-router。可以使用import语句或者CDN的方式进行引入，例如：

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

Vue.use(VueRouter)

1. 配置路由

在Vue.js中使用vue-roter，需要创建route配置文件，配置路由。路由主要由路由路径和对应的组件组成。例如：

// 引入组件
import Home from './components/Home.vue'
import About from './components/About.vue'

// 定义路由
const routes = [
  { path: '/home', component: Home },
  { path: '/about', component: About }
]

1. 初始化vue-router

在Vue.js应用程序中，需要创建vue-router实例，并将路由配置传递给实例。例如：

const router = new VueRouter({
  routes
})

1. 注册vue-router

将vue-router实例通过Vue.js应用程序注册到Vue.js实例上。例如：

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

1. 使用路由

在路由配置完成后，就可以在Vue.js组件中使用路由跳转功能了。可以通过router-link组件或$router对象进行跳转。

• 使用router-link组件

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

• 使用$router对象

// this.$router.push跳转
this.$router.push('/home')
this.$router.push('/about')

// this.$router.replace跳转
this.$router.replace('/home')
this.$router.replace('/about')

// this.$router.go跳转
this.$router.go(-1)

示例1： 使用router-link组件进行路由跳转

<template>
  <div>
    <h1>Vue Router 示例1</h1>
    <router-link to="/home">Home</router-link> |
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

示例2： 使用$router对象进行路由跳转

<template>
  <div>
    <h1>Vue Router 示例2</h1>
    <button @click="goHome">跳转至 Home 页面</button>
    <button @click="goAbout">跳转至 About 页面</button>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    goHome() {
      this.$router.push('/home')
    },
    goAbout() {
      this.$router.push('/about')
    }
  }
}
</script>

通过以上6个步骤和两个示例，我们可以非常容易地在Vue.js应用程序中使用vue-router。