vue多层嵌套路由实例分析

本文实例讲述了某视频剪辑软件多层嵌套路由。分享给大家供大家参考，具体如下：

多层嵌套：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title document/title script src=' http : bower _ components/vue/dist/vue。js '/script script src=' http : bower _ components/vue-router/dist/vue-router。js '/脚本风格.v-link-active { font-size : 20px；color : # f60 }/style/head body div id=' box ' ul阿利v-link='{path:'/home'} '主页/a /li阿利v-link='{path:'/news'} '新闻/a /li /ul分区路由器-视图/路由器-视图/div /div模板id='home' h3我是主页/H3 div a v-link=' { path : '/home/log in ' } '登录/a a v-link=' { path : '/home/reg ' } '注册/a/div/路由器-视图/路由器-视图/div/模板模板id='news' h3我是新闻/H3/模板脚本//1。准备一个根组件var App=Vue。extend()；//2.国内新闻组件都准备var Home=Vue。扩展({模板： ' # Home ' })；var News=vue。扩展({ template : ' # News ' })；//3.准备路由var router=new VueRouter()；//4.关联路由器。map({ ' home ' : { component : home，subroute 3360 { ' log in ' : { component : { template : ' strong我是登录信息/strong' } }、“reg”: { component : { template : } strong我是注册信息/strong' } } } }，' news ' : { component : news } })；//5.启动路由router.start(App，' # box ')；//6.跳转路由器。重定向({“/”:“home”})；/脚本/正文/html效果图：

路由其他信息：

/detail/: id/age/: age { { $ route。params | JSON } }-当前参数{{$route.path}} -当前路径{{$route.query | json}} -数据

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title document/title script src=' http : bower _ components/vue/dist/vue。js '/script script src=' http : bower _ components/vue-router/dist/vue-router。js '/脚本风格.v-link-active { font-size : 20px；color : # f60 }/style/head body div id=' box ' ul阿利v-link='{path:'/home'} '主页/a /li阿利v-link='{path:'/news'} '新闻/a /li /ul分区路由器-视图/路由器-视图/div /div模板id='home' h3我是主页/H3 div a v-link=' { path : '/home/log in/ZNs ' } '登录/a a v-link=' { path : '/home/reg/奋斗' } '注册/a/div/路由器-视图/路由器-视图/div/模板模板id='news' h3我是新闻/H3 div a v-link=' { path : '/news/detail/001 ' } '新闻001/a a v-link=' { path : '/news/detail/002 ' } '新闻002/a/分区路由器-视图/路由器-视图/模板模板id=' detail“{ 0 $ route。params | JSON } } br { { $ route。路径} } br { { $ route。查询| JSON } }/模板脚本//1。准备一个根组件var App=Vue。extend()；//2.国内新闻组件都准备var Home=Vue。扩展({模板： ' # Home ' })；var News=vue。扩展({ template : ' # News ' })；var Detail=Vue。扩展({ template : ' # Detail ' })；//3.准备路由var router=new VueRouter()；//4.关联路由器。map({ ' home ' : { component : home，subroute : { ' log in/: name ' : { component : { template : } ' strong我是登录信息{ { $ route。params | JSON } }/strong ' }，' reg ' : { component : { template : } ' strong我是注册信息/strong' } } } }，' news':{ component:News，subroute 3360 { '/detail/: id ' : { component : detail } } } })；//5.启动路由router.start(App，' # box ')；//6.跳转路由器。重定向({“/”:“home”})；/脚本/正文/html效果图：

希望本文所述对大家vue.js程序设计有所帮助。