vue路由跳转详细步骤

1、下载vue-router路由并全局匹配，npm install vue-router --save

如果有淘宝镜像可以cnpm install vue-router --save

2、在main.js文件中引入vue-router

import VueRouter from 'vue-router'

Vue.use(VueRouter)

（如果创建项目的时候选择路由可以省略以上两步）

3、创建组件，我创建的是HelloWorld.vue、Hello.vue、World.vue，等三个组件；

如图：

组件之间，helloworld跳转hello或者world，重要点有标记

如图：

4、在router文件夹下的index.js中配置路由，并引入文件；

routes: [

    {

      path: '/',

      name: 'HelloWorld',

      component: HelloWorld,

    },

    {

      path: '/hello',

      name: 'Hello',

      component: Hello

    },

    {

      path: '/world',

      name: 'World',

      component: World

    },

  ]

如图：

引入文件：

import HelloWorld from '@/components/HelloWorld'

import Hello from '@/components/Hello'

import World from '@/components/World'

如图：

5、成功进行跳转页面

如图：