网站设计分享,贵德县建设局网站,最常用最齐全wordpress插件大全,朵朵软件网站建设单页应用程序:例 网易云 多页应用程序#xff1a;例 京东 网易云导航栏点击任一网页不会跳转京东导航栏点击任一包括导航区域就会实现网页跳转 路由介绍 VueRouter Vue路由介绍 5个步骤写完之后出现 #/#xff0c;说明当前Vue实例已经被路由所管理 2个关键步骤 新… 单页应用程序:例 网易云 多页应用程序例 京东 网易云导航栏点击任一网页不会跳转京东导航栏点击任一包括导航区域就会实现网页跳转 路由介绍 VueRouter Vue路由介绍 5个步骤写完之后出现 #/说明当前Vue实例已经被路由所管理 2个关键步骤 新建views文件夹存放 跟路由相关的页面性质组件 新建三个组件Friend,Find,My 一.配置路由规则在路由对象中配置每个规则是一个对象 每条规则对应每个组件的地址栏路径以及组件名字引入每个组件 //main.js
import Vue from vue
import App from ./App.vueVue.config.productionTip false// // 全局注册指令
// // 第一个参数是指令名第二个参数是指令的配置项在配置项里可以写指令相关的钩子相关的生命周期函数
// Vue.directive(focus, {
// // inserted会在指令所在元素被插入到页面时触发
// inserted(el) {
// // el就是指令所绑定的元素
// el.focus()// }
// })// 路由的使用步骤 52
// 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.vueimport 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 --
templatedivdiv classfooter_wrapa href#/find发现音乐/aa href#/my我的音乐/aa href#/friend朋友/a/divdiv classtop!-- 路由出口 - 匹配的组件所展示的位置 --router-view/router-view/div/div
/templatescript
export default {}
/scriptstyle/style 组件存放目录问题为何路由相关组件要放在views目录呢 - 组件分类 组件分类更加容易维护
页面组件views目录复用组件components目录
