嵌套路由

这是一种很常见的功能，在一个路由下还分有子路由，比如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

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