vue中如何创建路由

在Vue中创建路由需要以下步骤：

1. 安装Vue Router

可以通过npm或yarn来安装Vue Router：

npm install vue-router

或

yarn add vue-router

2. 创建路由实例

在项目的入口文件（一般是main.js）中创建路由实例，例如：

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

Vue.use(VueRouter)

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

其中，routes是一个数组，包含了所有的路由配置项，每个路由配置项都包含了path、name和component等属性。

3. 注册路由实例

在Vue实例中注册路由实例，例如：

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

其中，router是上一步创建的路由实例。

4. 在组件中使用路由

在需要使用路由的组件中，可以通过this.$router来访问路由实例，例如：

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

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

其中，router-link是用来生成链接的组件，to属性指定了链接的目标路径，router-view是用来显示组件的容器。