vue-router-路由嵌套使用/参数传递

vue-router-路由嵌套使用

{
  path: '/home',
  name: 'Home',
  component: Home,
  children:[
    {
      path:'news',
      component:()=>import(/* webpackChunkName: "news"*/ '../components/HomeNews.vue')
    },
    {
      path:'message',
      component:()=>import(/* webpackChunkName: "message"*/ '../components/HomeMessage.vue')
    }
  ]
},

比如们home路径下有message和news两个路由分支，我们这属于子分子，不可能在home同级别配置路由,这两个路径相当于他的子节点，采用children属性，是一个数组，里边是路由对象。

<div class="home">
  <router-link to="/home/news">新闻</router-link>
  &nbsp;
  <router-link to="/home/message">消息</router-link>
  <router-view></router-view>
</div>

同样要在父组件里使用router-link来设置跳转也米娜，to属性必须是绝对路径，带上父节点路由，前边也要有斜杆

同时也需要在home界面里留下占位符router-view，切换页面在占位符标签内显示对应信息，

也可以重定向对应路由在cheildren里.

vue-router参数传递

params我们已经之前使用过动态路由

url标准格式：

完整格式

query类型就是url里的查询部分

第一步创建Profile.vue文件

<template>
<div>
  <h2>我是Profiled的组件</h2>
  <h2 v-for="(value,key) in $route.query">{{key}}:{{value}}</h2>
</div>
</template>

<script>
export default {
name: ""
}
</script>

<style scoped>

</style>

第二部在index.js里配置路由

{
  path: '/profile',
  name: 'Profile',
  component: () => import(/* webpackChunkName: "profile" */ '../components/Profile.vue')
}

第三步在app.vue里配置跳转

<router-link :to="{path:'/profile',query:message}">Profile</router-link>

之前to属性里直接可以配置一个path，现在有多个属性写成对象形式，jquery属性也是一个对象，对应的如下

message:{name:'lcq',age:21,height:1.88}

然后我们访问对应url时

通过query类型可以进行在路由之间传递参数，会显示在路由后边，然后通过v-for遍历对象

通过$route.query获取传递的参数对象

query和params区别，params需要路由路径变量，通过拼接可以动态设置路由，但是参数传递内容太少，不方便；query直接可以将参数信息放入对象。

通过方法传递

<button @click="userClick">用户</button>
<button @click="profileClick">档案</button>

userClick() {
  this.$router.push('/user/' + this.userId)
},
profileClick() {
  this.$router.push({
    path: '/profile',
    query: {
      name: 'lcq',
      age: 21,
      height: 1.88
    }
  })
}

注意在方法中需要使用$router来实现跳转，其参数可以是一个对象，和router-link标签里的to属性一样的。

后边获取参数使用的是$route而非router，通过query对象获取具体的属性