作用：前端路由

核心：锚点值的改变，根据不同的值，渲染指定DOM位置的不同数据

原理：

• window.addEventListener('hashchange',fn);
• 根据你放<router-view></router-view><div id="xxx"></div> 作为一个DOM上的标识
• 最终当锚点值改变触发hashchange的回调函数，我们将指定的模板数据插入到DOM标识上

<div class="h">我是头部</div>
<div id="content" class="b"></div>
<div class="f">我是底部</div>
<script type="text/javascript">
//监视锚点值的改变
window.addEventListener('hashchange', function() {
    var text = '';
    switch (location.hash) {
        case '#/music':
            text = '各种音乐的数据';
            break;
        case '#/movie':
            text = '各种电影的数据';
            break;
    }
    document.getElementById('content').innerHTML = text;
})
</script>

经验：以后看到vue开头的插件，就知道必须Vue.use

Vue的核心插件:

• vue-router 路由
• vuex 管理全局共享数据

使用方式：

1. 下载 npm i vue-router -S
2. 封装路由

import Vue from 'vue';
//配置路由
import VueRouter from 'vue-router';
Vue.use(VueRouter);

//1.创建组件
import Home from '../components/Home.vue';
import News from '../components/News.vue';

//2.配置路由   注意：名字
const routes = [
    { path: '/home', component: Home },
    { path: '/news', component: News, name: 'news' },
    { path: '*', redirect: '/home' }   /*默认跳转路由*/
]

//3.实例化VueRouter  注意：名字
const router = new VueRouter({
    mode: 'hash',   /*hash模式改为history*/
    routes // （缩写）相当于 routes: routes
})

//5 <router-view></router-view> 放在 App.vue
export default router;

1. 在main.js引入router.js

import router from './router/router.js';
new Vue({
	el: '#app',
  router,
  render: h => h(app);
});

1. 在app.vue中留坑 <router-view></router-view>

⭐️ router-link

• <router-link> 默认渲染为一个a标签