vue Router路由自我总结
Posted mark21
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue Router路由自我总结相关的知识,希望对你有一定的参考价值。
# npm安装路由、 # main.js中注入路由 # router.js中 import Router from ‘vue-router‘ Vue.use(Router) # 定义路由表 new VueRouter({ linkActiveClass:‘active‘, //全局配置 router-link 标签生成的 CSS 类名 routes:[ //无嵌套路由 { path:‘/‘ // ‘/‘表示匹配首页 name:‘****‘ component:***** }, { path:‘****‘ name:‘****‘ component:***** }, //嵌套路由 { path:‘/news‘ name:‘****‘ component:*****, children:[ { path:‘/news/sport‘, //此写法是绝对路径 component:***** }, { path:‘tech‘, //前面没有/,此写法是相对路径,即:/news/tech component:**** }, { path:‘‘, redirect:‘tech‘ //重定向到某个路由,即默认选中某个路由 } ] }, ] }) # 渲染出口 <router-view></router-view> # 路由跳转 <router-link to=‘/home‘ tag=‘li‘></router-link> //router-link 默认渲染出来的是 a 标签,如果需要让它渲染出来的是别的标签,则可以使用 tag 属性指定渲染后的标签,例如tag=‘li‘ //可以在每个 router-link 上使用 active-class 来激活 CSS 类名: active-class=‘active‘ ,比较麻烦,需要每个加 或者在 VueRouter 实例中,使用 linkActiveClass 全局配置 CSS 类名 //exact 类名精确匹配,用在路由为‘/’的首页上,防止出现切换其他路由时首页样式问题 #缓存路由 <keep-alive> <router-view></router-view> </keep-alive>
以上是关于vue Router路由自我总结的主要内容,如果未能解决你的问题,请参考以下文章
Vue总结第五天:vue-router (使用模块化(创建Vue组件)机制编程)router-link 标签的属性路由代码跳转懒加载路由嵌套(子路由)路由传递数据导航守卫)