vue使用router

Vue.js是一个渐进式的JavaScript框架，它提供了一系列的工具和API，用于构建用户界面。Vue.js的Router是一个官方提供的插件，它允许我们在Vue.js应用中实现路由功能。

Vue.js的Router插件可以让我们将不同的组件映射到不同的URL上，从而实现页面之间的跳转和刷新。在Vue.js应用中使用Router插件，我们需要先安装和引入它，然后在Vue实例中使用它。

步骤如下：

1. 安装Vue.js的Router插件

可以使用npm进行安装：

npm install vue-router

2. 引入Vue.js的Router插件

在Vue.js应用的入口文件中引入Vue.js的Router插件：

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

Vue.use(VueRouter)

3. 配置路由

创建一个路由配置文件，用于定义路由和对应的组件，然后导出路由实例：

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({
  mode: 'history',
  routes
})

export default router

在上面的例子中，我们定义了两个路由，分别对应了两个组件：Home和About。路由实例通过VueRouter构造函数创建，其中mode属性用于定义路由模式，history模式可以让我们使用HTML5 History API来管理路由。

4. 使用路由

在Vue.js应用的根实例中使用路由：

import Vue from 'vue'
import App from './App.vue'
import router from './router'

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

在上面的例子中，我们将路由实例作为根实例的router选项，这样就可以在组件中使用router实例的API来实现路由功能了。

例如，在Home组件中可以添加一个链接，用于跳转到About组件：

<template>
  <div>
    <h1>Home</h1>
    <router-link to="/about">About</router-link>
  </div>
</template>

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

<style>
</style>

在About组件中可以添加一个返回链接，用于返回到Home组件：

<template>
  <div>
    <h1>About</h1>
    <router-link to="/">Home</router-link>
  </div>
</template>

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

<style>
</style>

使用Vue.js的Router插件可以让我们更方便地实现路由功能，从而提高应用的可用性和用户体验。