![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
天蓬老师Correction status：qualified
Teacher's comments：
Collection
Collection
<nav><a href="#list1">国内新闻</a><a href="#list2">娱乐新闻</a></a></nav><!-- 该区域用于显示路由的内容 --><div class="route-view"></div><script>let list1 = `<ul><li><a href="">返乡人员如何划定？国家卫健委最新回应</a></li><li><a href="">返乡人员如何划定？国家卫健委最新回应</a></li><li><a href="">返乡人员如何划定？国家卫健委最新回应</a></li></ul>`;let list2 = `<ul><li><a href="">都当妈了还不许人家晒晒娃？</a></li><li><a href="">都当妈了还不许人家晒晒娃？</a></li><li><a href="">都当妈了还不许人家晒晒娃？</a></li></ul>`;// 获取路由的内容显示区元素const routeView = document.querySelector(".route-view");window.addEventListener("hashchange", show);// 页面加载完就执行window.addEventListener("DOMContentLoaded", show);function show() {// console.log(location.hash);switch (location.hash) {case "#list1":routeView.innerHTML = list1;return;case "#list2":routeView.innerHTML = list2;return;default:routeView.innerHTML = list1;}}</script>
<!-- 加载vue框架 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!-- 路由模块 --><script src="vue-router-dev/dist/vue-router.js"></script><body><nav class="app"><!-- vue路由锚点 --><router-link to="/list1">今日话题</router-link><router-link to="/list2">游戏新闻</router-link><!-- 路由到的资源显示区域 --><router-view></router-view></nav><script>const list1 = {template: `<ul><li><a href="">80多份裁判文书背后的中老年“养生培训”套路</a></li><li><a href="">80多份裁判文书背后的中老年“养生培训”套路</a></li><li><a href="">80多份裁判文书背后的中老年“养生培训”套路</a></li></ul>`,};const list2 = {template: `<ul><li><a href="">LPL春季赛：RNG2-0击败OMG！Cryin豪取5杀</a></li><li><a href="">LPL春季赛：RNG2-0击败OMG！Cryin豪取5杀</a></li><li><a href="">LPL春季赛：RNG2-0击败OMG！Cryin豪取5杀</a></li></ul>`,};// 1. 创建路由const router = new VueRouter({// 配置路由routes: [{ path: "/list1", component: list1 },{ path: "/list2", component: list2 },],});new Vue({// 2. 注册路由router,}).$mount(".app");</script>
