当前位置：首页 > news >正文

网站建设常用的英文大一html网页制作作业

news 2026/4/6 20:48:51

网站建设常用的英文,大一html网页制作作业,ui设计师真的烂大街了吗,注册地址单页应用程序:例网易云多页应用程序：例京东网易云导航栏点击任一网页不会跳转京东导航栏点击任一包括导航区域就会实现网页跳转路由介绍 VueRouter Vue路由介绍 5个步骤写完之后出现 #/，说明当前Vue实例已经被路由所管理 2个关键步骤新…

单页应用程序:例网易云

多页应用程序：例京东

网易云导航栏点击任一网页不会跳转
京东导航栏点击任一包括导航区域就会实现网页跳转

路由介绍

VueRouter Vue路由介绍

5个步骤写完之后出现 #/，说明当前Vue实例已经被路由所管理

2个关键步骤

新建views文件夹，存放跟路由相关的页面性质组件

新建三个组件Friend,Find,My

一.配置路由规则（在路由对象中配置，每个规则是一个对象）

每条规则对应每个组件的地址栏路径，以及组件名字
引入每个组件

//main.js
import Vue from 'vue'
import App from './App.vue'Vue.config.productionTip = false// // 全局注册指令
// // 第一个参数是指令名，第二个参数是指令的配置项（在配置项里可以写指令相关的钩子，相关的生命周期函数）
// Vue.directive('focus', {
//   // inserted会在指令所在元素被插入到页面时触发
//   inserted(el) {
//     // el就是指令所绑定的元素
//     el.focus()//   }
// })// 路由的使用步骤 5+2
//  1.下载 v3.6.5
// 2.引入
// 3.安装注册Vue.use(Vue插件)
// 4.创建路由对象
// 5.注入到new Vue中，建立关联// 2个核心步骤
// 1.建组件(views目录)，配规则
// 2.准备导航链接，配置路由出口(匹配的组件所展示的位置)import Find from './views/Find.vue'
import My from './views/My.vue'
import Friend from './views/Friend.vue'import VueRouter from 'vue-router'
Vue.use(VueRouter) //VueRouter插件初始化
const router = new VueRouter({  //创建路由对象//routes 配置路由规则//route 一条路由规则就是一个对象 {path:路径，component:组件}routes: [{ path: '/find', component: Find },{ path: '/my', component: My },{ path: '/friend', component: Friend },]
}) new Vue({render: h => h(App),// router:router //将路由对象注入到Vue实例中(冒号后是路由对象，简写的话键值要一样)router
}).$mount('#app')

补充：组件名字仅仅是一个单词会报错，在 export default {}导出中将组件名字写为多个单词组合

二.准备导航链接，配置路由出口(匹配的组件所展示的位置)

<!-- App.vue -->
<template><div><div class="footer_wrap"><a href="#/find">发现音乐</a><a href="#/my">我的音乐</a><a href="#/friend">朋友</a></div><div class="top"><!-- 路由出口 -> 匹配的组件所展示的位置 --><router-view></router-view></div></div>
</template><script>
export default {}
</script><style></style>