vue的路由配置，router-link的使用

在vue项目中使用router-link实现路由的跳转。

1. 新建vue组件（在项目中建立以vue结尾的文件）
   我在components文件下新建了home.vue和login.vue两个文件，两个文件中随便写点什么，有区别就行。

2. 在index.js（router文件夹下的）配置路由信息

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Login from '@/components/login'
import  Home from '@/components/home'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path:'/login',
      name:'Login',
      component:Login
    },
    {
      path:'/home',
      name:'Home',
      component:Home
    }
  ]
})

其中login和home的信息就是新配置的路由信息
4. 在App.vue中使用配置好的路由，即router-link的使用

<router-link to="login">登录</router-link><br>
 <router-link to="/home">首页</router-link>
 <router-view></router-view>

App.vue新增代码

小结：有router-link要加上router-view，才会显示出链接的内容，内容在哪里显示取决于router-view放在页面的位置。如果只有router-link的话（踩过的坑），点击链接，在浏览器中地址栏发生变化但是，内容不变；如果只有router-view，会显示helloword.vue的内容（在没有修改项目的默认路由前提下）。也就是说router-view给了router-link内容显示的窗口。