小白七七之vue-cli简单的路由跳转

1.通过连接建立俩个页面，先建立首页面first.vue

<template>
  <div>
    <router-link >出发到a页面</router-link>
    <router-link>出发到b页面</router-link>
  </div>
</template>

设立好两个链接在这里

2. 在router文件夹中找到index.js文件打开

import First from '@/components/first'  //这是当前页面
import A from '@/components/A'  //这是我想去的另一个页面a
import B from '@/components/B' //这是我想去的另一个页面b

import Vue form 'vue’的意思
import Vue form ‘vue’ 写全的话是
import Vue from ‘…/nodemouls/vue/list/vue.js’；
此时在webpack.base.conf.js中进行了定义，内置了一些选项，extenions:[’.js’,’.vue’,’.json’],意思是省略后面的后缀，由webpack来自动为我们加上。
如果名字比较长，还可以起个别名。
alias:{ ‘@’:resolve(‘src’)},
它的意思是在vue项目中，引入路径的时候使用@即代表src文件夹，省去了…/…/…/的操作，这样写比较十分方便。
当我们在模板中写img的时候有时也需要翻着找，也能用@代替

//然后更改index.js下面代码块：
export default new Router({
  routes: [
    {
      path: '/',
      name: 'First',
      component: First 
    },
    {
      path: '/A', //跳转的路径显示
      component: A
    },
    {
      path: '/B',  //跳转的路径显示
      component: B
    }
  ]
})

这个时候可以补充到除了first.vue的未竟的代码块为

<template>
  <div>
    <router-link to="/A">出发到a页面</router-link>
    <router-link to="/B">出发到b页面</router-link>
  </div>
</template>

A页面的代码块为： 有的时候为了方便我们可以转回赶回的路径

<template>
  <div>
    你好呐，我是AAAAAAAAAAAAAAaa页面
    <p><router-link to="/">返回</router-link></p>
    </div>

</template>

B页面的代码块为

<template>
  <div>
    你好呐，我是BBBBBBBBBBBBBBBBBBB页面
    <p><router-link to="/">返回</router-link></p>
    </div>

</template>

顺便说一下，router-link在vue中是起着和a标签超链接一样的作用，有个时候会有下划线不好看
这个时候只要是在当前的vue页面的style样式加上下面的代码就好了：

<style>
  a {
    text-decoration: none;
    color: aliceblue;//颜色随便改
  }
  .router-link-active {
    text-decoration: none;
  }
</style>