vue-router入门及简单配置

vue-router

路由是决定数据包从来源到目的地的路径，并且转送将输入端的数据转移到合适的输出端

前端渲染 后端渲染

后端渲染

早期用jsp/php开发，后端服务器渲染完直接给前端，
后端路由：后端处理URL和页面之间的映射关系

前后端分离

后端只负责提供数据，不负责任任何阶段的内容
输入URL后，首先去静态资源服务器拿到：html、css、js（js代码由浏览器执行，$ajax(url:api接口 success:function)）,再去API接口，拿到大量数据后，其他的js代码创建div，再渲染到页面上
后端只提供API来返回数据，前端通过ajax获取数据，并且可以通过js将数据渲染到页面中

前端渲染：

浏览器中显示的网页中的大部分内容，都是由前端写的js代码，在浏览器中执行，最终渲染出来的网页
单页面富应用阶段：
SPA最主要的特点就是在前后端分离

使用vue-router的步骤

第一步：创建路由组件

在src文件夹下的components下创建两个vue文件
创建了两个组件：Home和About
Home的代码如下：

<template>
    <div>
        <h2>我是首页</h2>
    </div>
</template>

<script>
export default {
    name:"Home"
}
</script>
<style scoped>

</style>

About代码如下：

<template>
    <div>
        <h2>我是关于</h2>
    </div>
</template>

<script>
    export default {
        name:"About"
}
</script>
<style scoped>

</style>

第二步：配置路由映射：组件和路径映射关系

在src文件夹下的router文件夹中的index进行配置：
代码如下

//配置路由相关信息
import Vue from 'vue'
import VueRouter from 'vue-loader'
import Home from '../components/Home'
import About from '../components/About'

//1.通过vue.use(插件),来安装这个插件
Vue.use(VueRouter)

const routes = [
    {
        path:'/home',
        component:Home
    },
    {
        path:'/about',
        component:About
    }
]

//2.创建路由对象
const router = new VueRouter({
    //配置路由和组件之间的映射关系
    routes
})

//3.将router对象传入到vue实例中  导出
export default router

第三步：使用路由，通过和

在App.vue文件下进行配置，代码如下：
（1）router-link:该标签是一个vue-router中已经内置的组件，它会被渲染成一个a标签
（2）router-view:该标签会根据当前的路径，动态渲染出不同的组件
（3）在路由切换时，切换的是router-view挂载的组件，其他内容不会改变

<template>
  <div id="app">
    <router-link to="/home">首页</router-link>
    <router-link to="/about">关于</router-link>
    <router-view></router-view>
  </div>
</template>

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

<style>
</style>