vue-router--嵌套路由以及数据传递

2,799 阅读2分钟

嵌套路由

这是一种很常见的功能,在一个路由下还分有子路由,比如home/news ,home/message,他们又对应不同的组件。这就是嵌套路由。

嵌套路由的实现

效果图: 实现过过程就是给path:home配置子路由 通过children属性再配置一层路由和组件之间的对应关系。注意这个地方的path路径不要加'/' 另外子路由对应的子组件应该显示在哪呢?肯定是home.vue中!在这里开辟一块区域去加载对应的组件。所以在home.vue中: 这就是home.vue显示子组件的位置。
当浏览器解析url:localhost:8080/home/news的时候,首先加载Home组件,然后在Home组件中加载homeNews组件

子路由配置默认路径

还是同样的配方: localhost:8080/home会默认重定向为localhost:8080/home/news

路由的数据传递

路由的数据传递可以通过两种方式,一种是传递给路由的params属性,还有一种是传递给路由的query属性

方式一,传值给路由的params属性

之前已经说过,就是动态路由的方式

{
	path:"/listing-detail/:id",
    component:Detail
}

访问/listing-detail/1的时候,相当于把1传递给了id变量。怎么取得这个id变量呢?它存放在这个这个路由对象的params中params是一个对象。id就是它的属性名,我这里输出了这个路由对象。(在Detail.vue中当他挂载到页面的时候(mounted)打印this.$route

方式二,传值给路由的query属性

怎么传值给query属性呢?在我们改变url的时候,我们不仅可以传递path,我们还可以传递一个属性query。

//之前我们改变url
<router-link to="/home"></router-link>
//其实,这个地方是一种语法糖完整写法应该是这样的
<router-link :to="{path:'/home'}"></router-link>
//这个对象不仅有path属性,还有query属性
<router-link :to="{path:'/home',query:{userid:1,username:2}}"></router-link>
// 这样请求的地址就是这种形式:localhost:8080/home?userid=1&username=2,问号后面的内容就是query

通过这种方式我们就能把值传递给这个路由对象的query属性。来试试。我就用/about对应的路由对象来看效果。 实现的话:
在App.vue中:改变url,进行传值 然后在About.vue中使用:

如何使用传递给路由的数据

其实前面都有涉及到,就是通过$route属性取得当前活跃的路由对象。当你是传值给params的时候,就使用$route.params获取数据。当你是传值给query的时候,就使用$route.query获取数据。

代码实现传递数据给路由的query属性

这里我们使用的是,router-link这个全局组件,如果我们使用普通的button能不能实现router-link的作用呢?当然是可以的:

 <router-link :to="{path:'/about',query:{userId:1,userName:'lixian'}}" replace active-class="aaa">关于</router-link>

用一个普通的button标签实现上面的功能:

//HTMl代码
 <li @click="goAboutQuery">关于</li>
 // script代码
  goAboutQuery()
    {
      this.$router.push({
        path:"/about",
        query:{
          userId:1,
          userName:"lixian"
        }
      })
    }

原理还是跟之前一样使用$router.push方法,这个push方法不仅可以传字符串'/home',也可以传一个对象{ path:"/about", query:{ userId:1, userName:"lixian"} }

拓展:url的组成

http://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#SomewhereInTheDocument 以上例来分析url的组成:

  • 协议(Scheme) 就是这里的http 协议就是http/https
  • 服务器(host) 要么是域名要么是IP地址,如这里的www.example.com
  • 端口号(port) http默认都是80端口https默认都是443端口 就是这里的80
  • 路径(path) 就是这里的/path/to/myfile.html
  • 查询(query)就是这里的key1=value1&key2=value2
  • 片段(fragment) 就是这里的SomewhereInTheDocument就是我们的锚点或者hash值

总结url的组成

Scheme://host:port/path?query#fragment