前端学习（三）vue框架配置路由

上一篇简单学习了下框架的代码在哪进入和修改，，接下来我们要给框架添加路由。

配置环境

安装vue—router

这是vue路由的组件，对前端稍微有点了解的都知道前端框架都是有路由的，可以理解它是连接众多页面的桥梁，安装指令如下：

cnpm install -g vue-router

项目中添加路由

可以看到我webstorm生成的这个项目结构里，没有router这个目录，那么我们就要给他新建一个

1. 在“src”目录下新建目录“router”
2. 新“router”目录下新建JavaScript文件“index.js”
3. "index.js"中添加以下内容：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)

export default new Router({
    routes: [ // 这是一个数组，以后有新的页面就往这个数组里添加
        {
            path: '/', // 这个就是根路径，也就是直接访问localhost:8080
            name: 'HelloWorld', // 这个页面的名字
            component: HelloWorld // 对应在component目录下的文件名
        }
    ]
})

在这个路由中，我已经把HelloWorld 这个页面给关联进来了，所以待会可以让路由来生效它。
代码复制过去之后，'vue-router’这行可能会提示没安装（其实是没把包信息添加到项目中），按“alt+enter”（代码智能错误修改）就行了。

修改项目代码

在原来的代码中，我们直接可以跑起来，现在添加了路由，那么我们就修改以下代码，让路由在其中生效。
首先我们要了解vue框架下，首先会在“main.js”下new vue对象，然后代码的入口是在“App.vue”。所以我们得在这两个文件中添加路由的配置，让路由生效。
首先是main.js:

import Vue from 'vue'
import App from './App.vue'
import router from './router' // 新增此行

Vue.config.productionTip = false

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

我们现在配置了路由，那么就可以让路由来引入这个“HelloWorld”，所以代码改成如下：

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png"> 
    <router-view></router-view> <!-- 这一行就是让路由的界面显示出来，具体功能去百度，必须要有这一行-->
  </div>
</template>

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

这时在run，可以看到页面依然保持同样的效果：

但仔细一看，其实少了一行，“Welcome to Your Vue.js App”。
仔细看代码会发现，原来那种引用HelloWorld的方式，他是传了个参数进去的：

 --这个msg就是参数变量
 <HelloWorld msg="Welcome to Your Vue.js App"/>
 再看HelloWorld 中怎么使用这个参数：
 HelloWorld.vue的第三行：
 <h1>{{ msg }}</h1>
 这里就是引用了这个参数

所以要保持页面和原来一模一样，可以把第三行改成下面的样子，取消传参的过程：

<h1>Welcome to Your Vue.js App</h1>

这样界面就和原来一模一样了。

本文主要就讲了把路由给加上去。后面会新建多个界面，让路由去管理。