![[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
vue路由案例
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><script src="./lib/vue.js"></script><script src="./vue-router-dev/dist/vue-router.js"></script><title>vue路由案例</title><style>body {display: grid;width: 100%;}div {width: 35rem;background-color: #d3d7d4;padding: 1.2rem 0.5rem;margin: 1rem;border-radius: 1% 1% 0% 0%;}a {padding: 0.5em;text-align: left;text-decoration: none;color: #130c0e;}p {width: 35rem;background-color: #d3d7d4;border-top: 1px solid grey;height: 20rem;padding-top: 0.5rem;}a:hover {color: #4f5555;}</style></head><body><div class="app"><!-- 1、创建路由 --><router-link to="jffx">旧房翻新</router-link><router-link to="jbzx">局部装修</router-link><router-link to="qmfx">墙面翻新</router-link><router-link to="fsbl">防水补漏</router-link><router-link to="wxaz">维修安装</router-link><!-- 2、渲染路由 --><router-view></router-view></div><script>// 创建模板const jffx = {template:"<p>旧房翻新<ul><li>三室两厅装修</li><li>两室一厅装修</li><li>一室一厅装修</li></ul></p>",};const jbzx = {template:"<p>局部装修<ul><li>卫生间翻新装修</li><li>厨房翻新装修</li><li>阳台翻新翻新装修</li></ul></p>",};const qmfx = {template: "<p>墙面翻新</p>",};const fsbl = {template: "<p>防水补漏</p>",};const wxaz = {template: "<p>维修安装</p>",};// 3、注册路由const router = new VueRouter({// 配置路由routes: [{ path: "/jffx", component: jffx },{ path: "/jbzx", component: jbzx },{ path: "/qmfx", component: qmfx },{ path: "/fsbl", component: fsbl },{ path: "/wxaz", component: wxaz },],});const vm = new Vue({router: router,el: ".app",});</script></body></html>