收藏
天蓬老师批改状态：合格
老师批语：
<body><nav><a href="#/list1">国际新闻</a><a href="#/list2">科技新闻</a></nav><!-- 用于显示路由的内容 --><div class="route-view"></div><script>const list1 = `<ul><li>马斯克：我们将在五年半内登陆火星</li><li>马斯克：我们将在五年半内登陆火星</li><li>马斯克：我们将在五年半内登陆火星</li></ul>`;const list2 = `<ul><li>抖音大战春晚红包：社交、支付、电商齐上阵</li><li>抖音大战春晚红包：社交、支付、电商齐上阵</li><li>抖音大战春晚红包：社交、支付、电商齐上阵</li></ul>`;// 获取路由显示区const routerView = document.querySelector(".route-view");// hashchange: url中的锚点变化时会自动触发这个事件window.addEventListener("hashchange", show);// DOMContentLoaded: 只要dom树创建完成就会触发,load:要等js执行完成和图片加载完成才触发window.addEventListener("DOMContentLoaded", show);function show() {console.log(location.hash);switch (location.hash) {case "#/list1":routerView.innerHTML = list1;return;case "#/list2":routerView.innerHTML = list2;return;default:routerView.innerHTML = list1;}}</script></body>
<body><nav class="app"><router-link to="/list1">国际新闻</router-link><router-link to="/list2">科技新闻</router-link><!-- 路由的资源显示区 --><router-view></router-view></nav><script>const list1 = {template: `<ul><li>马斯克：我们将在五年半内登陆火星</li><li>马斯克：我们将在五年半内登陆火星</li><li>马斯克：我们将在五年半内登陆火星</li></ul>`,};const list2 = {template: `<ul><li>抖音大战春晚红包：社交、支付、电商齐上阵</li><li>抖音大战春晚红包：社交、支付、电商齐上阵</li><li>抖音大战春晚红包：社交、支付、电商齐上阵</li></ul>`,};// 1. 创建路由对象const router = new VueRouter({//路由配置routes: [// 每一个路由都是一个对象,每一个对象对应着一个路由地址{ path: "/list1", component: list1 },{ path: "/list2", component: list2 },]});//2. 注册路由new Vue({el: ".app",// router: router,router,})</script></body>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
