阶段三： 路由 vue-router

阶段三： 路由 vue-router 

v3 => vue2
v4 => vue3
文档：
https://v3.router.vuejs.org/zh/installation.html

路由：像传统网站（多页面应用）一样，通过改变url地址自动实现页面更新。

SPA: SPA（single page application），只有一个HTML页面，通过路由实现页面内的局部切换，公共资源部分只加载一次。
通过JS实现动态加载、切换里面的内容（结构）。

手动集成一次：
1、安装
npm i vue-router@3 -S

2、路由配置
router/index.js:

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

import Home from '../views/Home.vue'
import About from '../views/About.vue'
import Goods from '../views/Goods.vue'
import News from '../views/News.vue'
import Login from '../views/Login.vue'
import NotFound from '../views/NotFound.vue'

// 路由配置
const routes = [
  {
    path : '/',
    component: Home,
    name : 'Home'
  },
  {
    path : '/about',
    component: About,
    name : 'About'
  },
  {
    path : '/goods',
    component: Goods,
    name : 'Goods'
  },
  {
    path : '/news',
    component: News,
    name : 'News'
  },
  {
    path : '/login',
    component: Login,
    name : 'Login'
  },
  {
    path : '*',
    component: NotFound,
    name : 'NotFound'
  },
];

// 创建路由实例
const router = new VueRouter({
  routes,
})

export default router;

3、main.js 加载VueRouter实例

import router from './router'
new Vue({
  render: h => h(App),
  router,
}).$mount('#app')

4、准备路由出口: 每个url改变就会把对应路由组件渲染的内容替换到 路由出口位置
<router-view></router-view>
---------------------

路由组件和一般组件：

相同点：都是组件，都是.vue文件；之前学习过的.vue文件中的哪些选项（data/methods）一样的

区别：
    1、一般分开放置views:路由组件，components:一步组件
    2、路由组件：配置；改变url地址以后由底层自动加载、渲染
       一般组件：引入、注册、标签
    3、路由组件："页面"，控制大块区域容器，一次性使用一个路由组件
       一般组件：是一些可复用布局点、功能点；它必须由路由组件或其他异步组件来加载使用

路由配置：
作用：定义url和路由组件之前映射关系 
每个路由组件都需要进行路由配置（router/index࿰