vue router学习之动态路由和嵌套路由详解

 更新时间:2017年09月21日 15:16:03   作者:0day__   我要评论
本篇文章主要介绍了vue router 动态路由和嵌套路由,详细的介绍了动态路由和嵌套路由的使用方法,有兴趣的可以了解一下

本文主要参考:https://router.vuejs.org/zh-cn/essentials/nested-routes.html

本文的阅读前提是已经能够搭建一个vue前台程序并且运行。如果还么有搭建可以参考文章:
//www.sxglgf.com/article/111650.htm

好,下面上货。

首先介绍一下动态路由。
动态路由按照我的理解,就是说能够进行页面的跳转,比如说:下面的这个页面中:

<template> 
 <div id="app"> 
  <header> 
   <router-link to="/">/</router-link> 
   <router-link to="/hello">/hello</router-link> 
   <router-link to="/cc">/cc</router-link> 
  </header> 
  <router-view style="border: 1px solid red"></router-view> 
 </div> 
</template> 

如果点击了/hello,那么在router-view中就会加载对应的模块,也就是在路由中设置的模块。

import Vue from 'vue' 
import Router from 'vue-router' 
import Hello from '@/components/Hello' 
import Foo from '@/components/Foo' 
import Foo2 from '@/components/Foo2' 
import Foo3 from '@/components/Foo3' 
Vue.use(Router) 
export default new Router({ 
 routes: [ 
  {path: '/', redirect: '/hello'}, 
  { 
   path: '/hello', 
   component: Hello, 
   children: [ 
    {path: '/hello/foo', component: Foo}, 
    {path: '/hello/foo2', component: Foo2}, 
    {path: '/hello/foo3', component: Foo3} 
   ] 
  }, 
  { 
   path: '/cc', 
   name: 'Foo', 
   component: Foo 
  } 
 ] 
}) 

也就是说,会跳转到Hello和Foo这两个组件。

那么嵌套路由是什么意思呢,最开始我以为的是这样:/hello/foo 和/hello/foo2这两个路由可以简写成嵌套路由,其实不是的。嵌套路由只的是,在子组件中再次嵌套组件。然后在使用路由进行跳转,这样跳转的时候,变化的就只有子组件,而外边的父组件没有变化。

下面我把完整的例子放出来,看一下:

App.vue

<template> 
 <div id="app"> 
  <header> 
   <router-link to="/">/</router-link> 
   <router-link to="/hello">/hello</router-link> 
   <router-link to="/cc">/cc</router-link> 
  </header> 
  <router-view style="border: 1px solid red"></router-view> 
 </div> 
</template> 
<script> 
export default { 
 name: 'app' 
} 
</script> 
<style> 
#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; 
} 
</style> 

Foo.vue

<template> 
 <div> 
  <h1>3434234343</h1> 
 </div> 
</template> 
<script> 
 export default { 
  name: 'Foo', 
  data () { 
   return { 
   } 
  } 
 } 
</script> 
<!-- Add "scoped" attribute to limit CSS to this component only --> 
<style scoped> 
 h1, h2 { 
  font-weight: normal; 
 } 
 ul { 
  list-style-type: none; 
  padding: 0; 
 } 
 li { 
  display: inline-block; 
  margin: 0 10px; 
 } 
 a { 
  color: #42b983; 
 } 
</style> 

Foo2.vue

<template> 
 <div> 
  <h1>this is Foo2</h1> 
 </div> 
</template> 
<script> 
 export default { 
  name: 'Foo2', 
  data () { 
   return { 
   } 
  } 
 } 
</script> 
<!-- Add "scoped" attribute to limit CSS to this component only --> 
<style scoped> 
 h1, h2 { 
  font-weight: normal; 
 } 
 ul { 
  list-style-type: none; 
  padding: 0; 
 } 
 li { 
  display: inline-block; 
  margin: 0 10px; 
 } 
 a { 
  color: #42b983; 
 } 
</style> 

Foo3.vue

<template> 
 <div> 
  <h1>this is foo3</h1> 
 </div> 
</template> 
<script> 
 export default { 
  name: 'Foo3', 
  data () { 
   return { 
   } 
  } 
 } 
</script> 
<!-- Add "scoped" attribute to limit CSS to this component only --> 
<style scoped> 
 h1, h2 { 
  font-weight: normal; 
 } 
 ul { 
  list-style-type: none; 
  padding: 0; 
 } 
 li { 
  display: inline-block; 
  margin: 0 10px; 
 } 
 a { 
  color: #42b983; 
 } 
</style> 

Hello.vue

<template> 
 <div class="hello"> 
  <h1>{{ msg }}</h1> 
  <h2>Essential Links</h2> 
  <ul> 
   <li><a href="https://vuejs.org" rel="external nofollow" target="_blank">Core Docs</a></li> 
   <li><a href="https://forum.vuejs.org" rel="external nofollow" target="_blank">Forum</a></li> 
   <li><a href="https://gitter.im/vuejs/vue" rel="external nofollow" target="_blank">Gitter Chat</a></li> 
   <li><a href="https://twitter.com/vuejs" rel="external nofollow" target="_blank">Twitter</a></li> 
   <br> 
   <li><a href="http://vuejs-templates.github.io/webpack/" rel="external nofollow" target="_blank">Docs for This Template</a></li> 
  </ul> 
  <h2>Ecosystem</h2> 
  <ul> 
   <li><a href="http://router.vuejs.org/" rel="external nofollow" target="_blank">vue-router</a></li> 
   <li><a href="http://vuex.vuejs.org/" rel="external nofollow" target="_blank">vuex</a></li> 
   <li><a href="http://vue-loader.vuejs.org/" rel="external nofollow" target="_blank">vue-loader</a></li> 
   <li><a href="https://github.com/vuejs/awesome-vue" rel="external nofollow" target="_blank">awesome-vue</a></li> 
  </ul> 
  <div> 
   <router-link to="/hello/foo">/hello/foo</router-link> 
   <router-link to="/hello/foo2">/hello/foo2</router-link> 
   <router-link to="/hello/foo3">/hello/foo3</router-link> 
  </div> 
  <router-view style="border: solid 1px blue"></router-view> 
 </div> 
</template> 
<script> 
 export default { 
  name: 'hello', 
  data () { 
   return { 
    msg: 'Welcome to Your Vue.js App' 
   } 
  } 
 } 
</script> 
<!-- Add "scoped" attribute to limit CSS to this component only --> 
<style scoped> 
 h1, h2 { 
  font-weight: normal; 
 } 
 ul { 
  list-style-type: none; 
  padding: 0; 
 } 
 li { 
  display: inline-block; 
  margin: 0 10px; 
 } 
 a { 
  color: #42b983; 
 } 
</style> 

路由:

import Vue from 'vue' 
import Router from 'vue-router' 
import Hello from '@/components/Hello' 
import Foo from '@/components/Foo' 
import Foo2 from '@/components/Foo2' 
import Foo3 from '@/components/Foo3' 
Vue.use(Router) 
export default new Router({ 
 routes: [ 
  {path: '/', redirect: '/hello'}, 
  { 
   path: '/hello', 
   component: Hello, 
   children: [ 
    {path: '/hello/foo', component: Foo}, 
    {path: '/hello/foo2', component: Foo2}, 
    {path: '/hello/foo3', component: Foo3} 
   ] 
  }, 
  { 
   path: '/cc', 
   name: 'Foo', 
   component: Foo 
  } 
 ] 
}) 

需要注意的是仔细的看App.vue和Hello.vue中,都包含<router-view></router-view>,但是他们的作用不同,App.vue是顶层路由,指的是组外层的路由,Hello.vue中的是嵌套路由,负责显示子组件。
我把页面截图一下:

 

这个界面,点击最上边的 / 或者/hello 或者/cc的时候,发生变化的是红色路由中的内容。当点击/hello/foo /hello/foo2 /hello/foo3 的时候,发生变化的是下面蓝色路由中的内容。

这样就和我们平时应用十分的相似了。最外层于有变化,或者局部有变化,但是不想全局的发生改变。

同时,这样也符合了模块化,各个模块分别在不同的模块中。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持澳门金沙网上娱乐。

相关文章

  • vue-router之nuxt动态路由设置的两种方法小结

    vue-router之nuxt动态路由设置的两种方法小结

    今天小编就为大家分享一篇vue-router之nuxt动态路由设置的两种方法小结,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue实现重置表单信息为空的方法

    vue实现重置表单信息为空的方法

    今天小编就为大家分享一篇vue实现重置表单信息为空的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制

    Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制

    这篇文章主要介绍了Vue 动态路由的实现以及 Springsecurity 按钮级别的权限控制的相关知识,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-09-09
  • 利用Vue2.x开发实现JSON树的方法

    利用Vue2.x开发实现JSON树的方法

    这篇文章主要给大家介绍了关于利用Vue2.x开发实现JSON树的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2018-01-01
  • 基于Vue和Element-Ui搭建项目的方法

    基于Vue和Element-Ui搭建项目的方法

    这篇文章主要介绍了基于Vue和Element-Ui搭建项目的方法,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-09-09
  • vue双花括号的使用方法 附练习题

    vue双花括号的使用方法 附练习题

    这篇文章主要为大家详细介绍了vue双花括号的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • vue的传参方式汇总和router使用技巧

    vue的传参方式汇总和router使用技巧

    这篇文章主要介绍了vue的传参方式和router使用技巧,本文给大家列举了好几种传参方式,需要的朋友可以参考下
    2018-05-05
  • Vue filter介绍及其使用详解

    Vue filter介绍及其使用详解

    本篇文章主要介绍了Vue filter介绍及其使用详解,VueJs 提供了强大的过滤器API,能够对数据进行各种过滤处理。一起跟随小编过来看看吧
    2017-10-10
  • 超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法

    超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法

    这篇文章主要介绍了超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • vue+webpack模拟后台数据的示例代码

    vue+webpack模拟后台数据的示例代码

    这篇文章主要介绍了vue+webpack模拟后台数据的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07

最新评论