详解windows下vue-cli及webpack 构建网站(四) 路由vue-router的使用

接下来我将详细讲解“详解windows下vue-cli及webpack 构建网站(四) 路由vue-router的使用”的完整攻略。

标题和前言

标题

“详解windows下vue-cli及webpack 构建网站(四) 路由vue-router的使用”

前言

当我们的网站变得越来越复杂时，我们需要将页面拆分为多个模块和页面，通过路由跳转实现，在这篇文章中，我们将学习如何使用 vue-router 来实现路由跳转。

vue-router的安装和引入

我们可以使用npm来安装 vue-router。

npm install vue-router --save

然后在项目中的 main.js 中引入并注册路由器。

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

路由配置

创建路由组件

在我们开始创建路由之前，我们需要先创建一些路由组件。

// src/components/Home.vue
<template>
  <div>
    <h1>Welcome to the home page!</h1>
  </div>
</template>

// src/components/About.vue
<template>
  <div>
    <h1>Welcome to the about page!</h1>
  </div>
</template>

创建路由实例

接下来，我们需要创建并配置路由实例。

// src/router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/components/Home.vue'
import About from '@/components/About.vue'

Vue.use(VueRouter)

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

const router = new VueRouter({
  routes
})

export default router

在上述代码中，我们创建了一个 routes 数组，里面包含了两个路由对象。每个路由对象都有一个 path 和一个 component 属性。path 定义了路由路径，component 定义了对应的组件。

我们创建了一个新的 VueRouter 实例，并将 routes 数组传递给它。最后，我们将 VueRouter 实例导出，以便在应用中引用它。

使用路由

最后，在我们的应用中使用我们的路由即可。

// src/main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router/index.js'

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

路由实现示例1

以示例为例，在 Home 组件中添加一个链接，以便我们可以导航到 About 组件页面。

// src/components/Home.vue
<template>
  <div>
    <h1>Welcome to the home page!</h1>
    <router-link to="/about">About</router-link>
  </div>
</template>

在 Home 组件中，我们添加了一个名为 router-link 的标签，它有一个 to 属性，指向我们在路由中定义的 about 路径。

路由实现示例2

我们还可以通过编程方式使用路由。例如，在 Home 组件中添加一个按钮，以编程方式将用户导航到 About 组件页面。

// src/components/Home.vue
<template>
  <div>
    <h1>Welcome to the home page!</h1>
    <button @click="navigateToAbout">Go to About Page</button>
  </div>
</template>

<script>
export default {
  methods: {
    navigateToAbout() {
      this.$router.push('/about')
    }
  }
}
</script>

在上面的代码中，我们将 router-link 标签更改为一个按钮，并将其绑定到 navigateToAbout 方法。在该方法中，我们使用 $router.push() 方法将用户导航到 about 页面。

总结

到此为止，我们已经学习了如何使用 vue-router 实现路由跳转。我们创建和配置了路由实例，并在应用程序中使用它们。我们还学习了两种不同的方法来导航到路由。