vue3动态添加路由及生成菜单
今天给各位分享vue在根据路由添加样式的知识，其中也会对vue3动态添加路由及生成菜单进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！
本文目录一览：
1、VueRouter的基本使用
2、vue路由（一、二级路由）
3、vue判断各种状态添加样式
4、vue点击当前路由添加class怎么做？
5、vue路由嵌套，如何子路由也有选中样式
6、在vue下面创建新页面并引入样式（图文讲解）
VueRouter的基本使用
1.导入vue-router.js文件，必须插入到vue.js文件后面
2.定义路由规则
4.将创建好的路由对象绑定到Vue实例上
5.修改URL哈希值
6.通过router-view渲染匹配的组件
7.css样式
router-link标签：Vue Router中提供专门用于设置哈希值的标签；
router-view标签：Vue Router中提供专门用于将路由匹配到的组件渲染到指定位置；
2.给router-link设置选中样式
默认情况下我们可以通过重写router-link -active类名来实现设置选中样式，但是我们也可以通过linkActiveClass来指定选中样式；
案例: 在one界面中又有两个按钮，通过这两个按钮进一步 切换one中的内容
vue路由（一、二级路由）
是前台为了实现单页面应用然后设置路径，根据不同的路径显示不同页面。但是这些路径在服务器上不是真是存在的
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项目中常常会根据某种状态添加样式一些样式，比如每个网站顶部都会根据进入某个页面添加某些样式。
解决方法：可以根据 $route路由上判断
假如某个路由$route.path里面有地址栏路由，即indexOf不等于-1，即可添加某种样式。
vue点击当前路由添加class怎么做？
vue-点击当前路由增加class,其他的删除class的方法
1. 路由操作
router-link
to='/list'
v-for='(item,index) in list'
:class='{active:index==idx}'
@click='btnClass(index)'
2. js部分
data () {
return {
idx:0,
list:["推荐",'社会','热点','汽车','科技','财经','军事','体育']
}
},
methods: {
btnClass: function(index) {
this.idx = index;
}
} （BY三人行慕课）
vue路由嵌套，如何子路由也有选中样式
原本选中是根据is-active来判断的，但是进图子路由都没有这个选中了，这时候只需要在再路由的meta中添加 activeMenu
比如子路由是/service/release/addSite，那你写/service/release/就可以实现
在vue下面创建新页面并引入样式（图文讲解）
1.在components下面新建一个grid.vue的文件，在文件里放入内容
2.在css里新建一个grid.css文件，把grid.vue需要的样式放进来
3.在router里的index.js里import，import 文件名 from 文件存放的路径；并在routes下面写好路由
4.在main.js里引入grid.css的样式，import '路径名'
关于vue在根据路由添加样式和vue3动态添加路由及生成菜单的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。
