【应用】使用vue router实现页面之间的跳转

在https://blog.csdn.net/Dora_5537/article/details/87918022这篇博客中，我们使用 vue-cli 新建了自己的项目；

在https://blog.csdn.net/Dora_5537/article/details/87921443这篇博客中，我们使用 WebStorm 打开并运行了自己的项目；

接下来，我们就简单使用 vue router 来实现页面之间的跳转吧~

1.index.html文件

在index.html文件中增加以下代码：

第一处：

第二处：

完整代码如下：

2.main.js文件

main.js文件暂时不做变动。

完整代码如下：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: ''
})

3.App.vue文件

在App.vue文件中删除多余代码。

完整代码如下：

4.router目录下的index.js文件

在index.js文件中引入你的所有.vue文件，并定义每一条路由的路径(payh)、名字(name)、组件(component)。

在这里，总共有三个页面，四条路由信息。

三个页面分别是 initial.vue，HelloWorld.vue，Position.vue。

四条路由信息中，除了对应以上三个页面的信息，还有一条默认路由，默认路由是指项目初始默认跳转的页面。在这里，它使用的组件是 initial.vue，即刚开始进入到 initial.vue 这个页面。

注意：

1. 一定不要忘记以下三行代码：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

2. 每一条路由的name是唯一的，绝不能重复。

完整代码如下：

import Vue from 'vue'
import Router from 'vue-router'

import initial from '@/components/initial'
import HelloWorld from '@/components/HelloWorld'
import Position from '@/components/Position'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'default',
      component: initial
    },
    {
      path: '/initial',
      name: 'initial',
      component: initial
    },
    {
      path: '/HelloWorld',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/Position',
      name: 'Position',
      component: Position
    }
  ]
})

5.components目录下的.vue文件

1）initial.vue

这是进行页面跳转的首页，我采用了两种方法来实现，分别是：

第一种：使用 “ path(路径) ”

/HelloWorld

第二种：使用 “ name(名字) ”

/Position

完整代码如下：

效果图如下：

 

2）HelloWorld.vue

这就是新建好项目之后，自带的.vue文件。我增加了两个地方的代码（大家也可以不修改这里，直接忽略）：

第一处：

第二处：

  .hello {
    text-align: center;
    margin-top: 10%;
  }

完整代码如下：

效果图如下：

 

3）Position.vue

这个是我在https://blog.csdn.net/Dora_5537/article/details/87932957这篇博客中使用的页面，用于理解CSS Position (定位)，这里不再细说。

完整代码如下：

效果图如下：

 

END