网站建设的步骤,杭州品牌推广,免费公司网站设计,奢侈品网站策划方案在上一篇内容讲到关于单页面组件的内容#xff0c;同时也附上补充讲了关于单页面#xff08;SPA#xff09;和多页面#xff08;MPA#xff09;之间的优缺点#xff0c;在本篇目当中就要来讲这个路由#xff08;vue-router#xff09;#xff0c;通过路由来实现页面的… 在上一篇内容讲到关于单页面组件的内容同时也附上补充讲了关于单页面SPA和多页面MPA之间的优缺点在本篇目当中就要来讲这个路由vue-router通过路由来实现页面的局部切换或者更改附上vue-router文档 —— 官方文档 | Vue Router 一级路由配置 可以在 main.js 中引入路由模块这些其实在创建项目的时候就已经帮我们处理好了的 在 /router/index.js 中来处理一下来通过简单的一部分对这个路由文件进行了解 然后将项目运行起来时会发现在浏览器请求url http://localhost:8080/ 的时候会发现请求的url会时变成 http://localhost:8080/#/ 现在来将原先 /views/HomeView.vue 文件进行一个简化
!-- /views/HomeView.vue --
templatediv classhomeimg altVue logo src../assets/logo.png/div
/template 通过路由信息的配置将HomeView.vue组件引入当path为Home时即请求为http://localhost:8080/#/home 的时候就会对应的切换到HomeView.vue 组件那么下面来进行一下尝试 在 /router/index.js 中配置 这样一来通过请求 http://localhost:8080/#/home 能否切换到HomeView组件呢 很显然是失败了没有将HomeView组件中的内容显示出来这是为什么呢 还记得在前面讲过这个项目的入口文件 main.js 再拿出来看一看 即使在路由配置当中通过path: /home 是可以匹配到HomeView组件但关键是这个HomeView组件应该如何去显示显示在哪里呢 如果要去显示就得到App.vue中去显示App.vue同时要预留一个位置给HomeView组件来进行显示内容通过 router-view/router-view 来进行预留位置
!-- App.vue --
templatediv idappsHello/sHellobutton按钮/buttonrouter-view/router-view/div
/templatescript
import hello from ./components/SayHello.vue
import Vue from vueVue.component(sHello, hello)export default {}
/script
stylebutton {background: yellow;}
/style现在来再次测试运行来看一下HomeView组件是否成功了 —— 成功将HomeView组件显示出来了 下面就来用前面所讲到的内容来完成一个声明式导航 声明式导航 讲到声明式导航大家已经了解和清除了那么不再赘述先来看一下简单的效果 当路由进行变化时对应的页面也将随即切换当请求的url地址为 localhost:8080/#/home 时页面会切换到首页页面HomeView服务ServerView和关于(AboutView) 这个两个同理那么下面先来编写这几个页面
1在 /views/ 目录下编写如下几个页面文件
!-- HomeView.vue --
templatediv classhome这是首页页面/div
/template!--ServerView.vue--
templatediv classserver这是服务页面/div
/template!--AboutView.vue--
templatediv classabout这是关于页面/div
/template2在 /router/index.js 文件中配置路由信息
import Vue from vue
import VueRouter from vue-router
// 引入组件
import Home from ../views/HomeView.vue
import Server from ../views/ServerView.vue
import About from ../views/AboutView.vueVue.use(VueRouter)const routes [{path: /},{path: /home,component: Home},{path: /server,component: Server},{path: /about,component: About}
]const router new VueRouter({routes
})export default router
3编写声明式导航组件 创建 /components/TabBar.vue 文件作为导航组件文件在 a标签 中通过 #/path路径 就可以进行跳转的切换这里的预编译器选择是 scss
templatenavullia href#/home首页/a/lilia href#/server服务/a/lilia href#/about关于/a/li/ul/nav
/templatescript
export default {}
/scriptstyle langscssnav{margin: 0 auto;padding: 0;border-bottom: 1px solid black;}ul{display: flex;li{flex:1;text-align: center;list-style: none;a{text-decoration: none;}}}
/style4将声明式导航组件引入App.vue中最后不要忘记在 App.vue 中预留一个显示的容器 router-view/router-view 来让其有显示的位置否则不报错也不会显示出来
!--App.vue--
templatediv idapptabBar/tabBarrouter-view/router-view/div
/templatescript
import tabbar from ./components/TabBar
import Vue from vueVue.component(tabBar, tabbar)export default {}
/script
stylebutton {background: yellow;}
/style5项目测试运行 点击【首页】 切换路由时对应的页面也会随即切换到这个首页页面点击【服务】点击【关于】测试OKlocation.hash 通过导航点击可以进行一个切换对应的路经发生变化window.onhashchange方法能够监听到锚点的改变该函数就会触发回调在回调中获取到location.hash的值这样一来就可以对导航文字进行效果处理如高亮显示—— [ #是锚点#/路径 是hash(哈希) ] 知道了这样一个原理后我们不会这么来操作因为Vue已经提供好了通过 router-link 标签下面来调整 TabBar.vue 中的代码段
!-- App.vue --
templatenavulrouter-link to/home tagli首页/router-linkrouter-link to/server tagli服务/router-linkrouter-link to/about tagli关于/router-link/ul/nav
/template 进行测试运行查看一下 观察可以看到原先并没有设置它的类选择器进行样式显示这样一来可以进行高亮效果的显示只需要进行样式的添加即可
style langscss.router-link-active{color:skyblue;font-weight: bold;}...
/style 可以看到选择的这个导航已经有了高亮的文字显示了那么如果需要避免冲突可以自行的来设置这个类选择器的样式给 router-link 标签中添加active-class属性如下
templatenavulrouter-link to/home tagli active-classactive-chosen首页/router-linkrouter-link to/server tagli active-classactive-chosen服务/router-linkrouter-link to/about tagli active-classactive-chosen关于/router-link/ul/nav
/template
scriptexport default {}
/script
style langscss.active-chosen{color: skyblue;font-weight: bold;}
/style 也许读者已经发现了一个问题当进入页面的时候不应该就是【首页】内容了吗怎么还需要再点击一次首页才能看到【首页】呢这就是下面要来讲到的 重定向 重定向 当进入页面的时候地址是 http://localhost:8080/#/ 那么现如今我们的首页地址则是 http://localhost:8080/#/home则当进入页面时就定制重定向到首页的地址即可 在 /router/index.js 中添加路由配置信息
...
const routes [{path: /,redirect: /home},
... 通过 redirect 将路径 / 进行重定向到 /home 接下来的再运行测试项目的时候进入的页面就是首页了 以上就是本篇目的全部内容了通过vue-router了解到了基础的路由信息、一级路由配置、声明式导航和在声明式导航中了解到了路由切换会触发location.hash执行以及路由的重定向问题再次感谢大家的支持
