vue路由(一、二级路由)

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue路由(一、二级路由)相关的知识,希望对你有一定的参考价值。

参考技术A

是前台为了实现单页面应用然后设置路径,根据不同的路径显示不同页面。但是这些路径在服务器上不是真是存在的

hash路由 默认的是hash路由
history路由

通过onhashchange()来检测路由的变化,根据不同的hash来显示不同元素。获取当前的hash值location.hash

通过onpopstate来检测history堆栈路径的变化,堆栈的路径是通过history.pushState(null, \'\',"?page=2")添加进去的

由hash路由设置成history路由,给路由添加配置项 mode="history"

1、设置相应组件
2、在router->index.js文件中添加配置
首先引入组件,然后配置规则 path:设置路径,name:名,component:组件

3、在需要现在组件的地方给页面添加<router-view></router-view>

4、设置导航路径
使用vue提供 <router-link to="路径"></router-link> 默认的解析成a标签

5、设置默认路由

6、设置导航样式

1、需要定义组件
2、确定好在那个组件配置二级路由,就去那个组件的配置规则中添加children关键字,按照一级路由的配置方法配置规则

3、在需要配置二级路由的组件中添加router-view
4、设置导航 <router-link to="/ / ">

5、设置导航链接的样式

我们可以定义一个一级路由,里面可以包裹底部footer组件,让他为二级路由,这时点击底部的二级路由时,就会切换不同的页面,而不需要底部组件显示的时候,那我们在配置一个一级路由就好了!!!

以上是关于vue路由(一、二级路由)的主要内容,如果未能解决你的问题,请参考以下文章

vue之二级路由

vue解决二级路由redirect(默认路由)不传参的问题

vue-router路由嵌套与二级路由重定向

Vue爬坑之旅:vue单页面二级套嵌路由

Vue-cli-4-路由配置文件,路由进阶,二级路由

Vue 二级路由的设置 (重点)