Vue路由设置嵌套（一级二级三级展示并且显示定向选中）

router.js

import Vue from 'vue'
import Router from 'vue-router'
// 引入页面一级
import Home from './views/Home.vue'
import About from './views/About.vue'
import Us from './views/Us.vue'
// 引入二级界面
import Homeone from './views/Homeone'
import Hometwo from './views/Hometwo'Vue.use(Router);// 设置history模式，url没有#号，符合url规范（分享链接至第三方，有的app不允许有#）
// history模式，访问二级页面的时候，刷新操作会出现404，需要后端配置（apache或nginx的url）重定向，重定向到首页路由
export default new Router({// history模式,去掉就是hash模式// 开发的时候就用hash// mode:'history',routes: [// 重定向，是访问首页跳转到指定页面// 1.{ path: '/', redirect: '/home' },{ path: '/', redirect: '/home' },// 2.{ path: '/', redirect: {name:'about'} },// 3.{ path: '/', redirect: to=>{return'/home'} },// { path: '/', redirect: to=>{return'/home'} },{// 可以小写path: '/Home',// 可以小写name: 'Home',// 对应的组件名字，我这里的是大写开头component: Home,// 一级界面里面的二级界面// 使用数组形式children: [// 再次进行重定向{ path: '/home', redirect: '/home/homeone' },// // 这里的path不用加斜杠  并且后面的组件不要加标点符号，会出现无法展示{ path: 'Homeone', name: 'Homeone', component: Homeone},{ path: 'Hometwo', name: 'Hometwo', component: Hometwo },]},{path: '/About',name: 'About',component: About},{path: '/Us',name: 'Us',component: Us},]
});

App.vue

<template><div id="app"><Body /><!-- 测试 --><div id="nav"><!-- 设置路由导航 --><router-link to="/home">首页</router-link><router-link to="/about">关于</router-link><router-link to="/us">我们</router-link></div><!-- 设置路由出口 --><router-view> </router-view><!-- 测试 --></div>
</template><script>
import Body from "./Pages/Body";
export default {name: "App",components: {Body,},
};
</script><style scoped>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
/* 导航边距 */
#nav a {margin: 10px 10px;
}
/* 导航选中显示颜色 */
#nav a.router-link-exact-active {color: maroon;
}</style>

main.js

import Vue from 'vue'; // 默认去node_modules文件目录去找到这个vue
import App from '@/App.vue'; // 这个就是src目录下的App.vue
import router from './router';
// 这里可以引入全局的css样式
// import './Pages/index.css'
// 对于性能的考量可以在局部添加css样式,主页面// 没输入等于开发模式
// 开发模式等于【Vue.config.productionTip = true】
// 生产模式【Vue.config.productionTip = false】
Vue.config.productionTip = true// 全局格式化金额
// Vue.filter('QmoneyFormat', (value) => {//     return "¥" + Number(value).toFixed(4)
// });// // 全局注册自定义指令
// Vue.directive('upper-word', (el, binding) => {//     console.log(el, binding);
//     el.textContent = binding.value.toUpperCase();
// });new Vue({router,render: h => h(App),
}).$mount('#app')

Home.vue

<template><div class="home"><h4>Home</h4><!-- 本页面的路由导航 --><ul id="xiaoxi"><li><router-link to="/home/homeone">消息01</router-link></li><li><router-link to="/home/hometwo">消息02</router-link></li></ul><!-- 本页面的路由出口，插入的内容 --><router-view></router-view></div>
</template><script>
export default {name: "Home",
};
</script><style scoped>
.home {width: 300px;height: 300px;background-color: cornflowerblue;
}
/* 导航选中显示颜色 */
#xiaoxi a.router-link-exact-active {color: maroon;
}
</style>

Homeone.vue

<template><div id="Homeone"><h3>Homeone里面的内容</h3></div>
</template><script>
export default {name: "Homeone",
};
</script><style>
</style>

packjson.js

{"name": "bili-app","version": "0.1.0","private": true,"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build"},"dependencies": {"animate.css": "^4.1.1","core-js": "^3.6.5","moment": "^2.29.1","pubsub-js": "^1.9.1","shortid": "^2.2.16","vue": "^2.6.11","vue-router": "^3.4.9"},"devDependencies": {"@vue/cli-plugin-babel": "~4.5.0","@vue/cli-service": "~4.5.0","vue-template-compiler": "^2.6.11"},"browserslist": ["> 1%","last 2 versions","not dead"]
}

Vue路由设置嵌套（一级二级三级展示并且显示定向选中）相关推荐

硬件 - CPU 为什么要分一级二级三级缓存
文章目录硬件 - CPU 为什么要分一级二级三级缓存 1.为什么要给 CPU 设置缓存 2.L1 Cache.L2 Cache.L3 Cache 3.三个级别的缓存与内存数据交互速度的大概对比 4. ...
天津二级计算机考试地点,2016年9月天津计算机一级二级三级四级考点地址电话...
2016年9月天津计算机等级考试考点 2016年9月天津计算机一级二级三级四级考点地址电话代码考点名称报名地点报名电话 1 120001 天津医学高等专科学校河西区柳林路14号教 ...
2021CFA一级二级三级预测结合十余年实践总结
2021CFA一级二级三级预测是结合十余年实践总结,针对CFA考试重难点分析,预测CFA考试必考要点的习题资料,也是市面上很少有带详细答案解析以及视频解析的优质题目,每年考点准确度高达90%以上,考一 ...
2023CFA一级二级三级视频网课
2023CFA一级二级三级视频网课已出,要的童鞋留邮箱!
2020年12月CFA一级二级三级百题预测
2020年12月CFA一级二级三级百题预测下载链接:https://pan.baidu.com/s/1uZ6UvB-tYR81Kq6z1fiidQ 密码:l3w1 是结合十余年实践总结,针对CFA考试 ...
2020年12月最新CFA一级二级三级百题预测+答案解析下载pdf
2020年12月最新CFA一级二级三级预测是结合十余年实践总结,针对CFA考试重难点分析,预测CFA考试必考要点的习题资料,也是市面上很少有带详细答案解析以及视频解析的优质题目,每年考点准确度高达90 ...
【CPU缓存】一级二级三级缓存
CPU缓存 CPU缓存(Cache Memory)是位于 CPU 与内存之间的临时存储器,它的容量比内存小的多,但是交换速度却快得多. CPU运算速度要比内存读写速度快很多,这样会使CPU花费 ...
homelede软路由设置方法_二级lede软路由设置方法,lede设置软路由网卡
二级lede软路由设置方法方法1:下一个sygate将制作一个软件桥. 在sygate中配置两个网卡的作用,一个是内部网络网关,连接到另一台计算机:另一个是访问外部网络,连接到外部网络. 方法二:( ...
记录element-ui级联选择器，二级三级列表无法显示的解决办法
<el-cascader expand-trigger="hover" :options="catelist& ...

Vue路由设置嵌套（一级二级三级展示并且显示定向选中）

Vue路由设置嵌套（一级二级三级展示并且显示定向选中）相关推荐

最新文章

热门文章