vue-router query属性

URL里面有个问号的是query属性，如下：
http://localhost:8080/#/home/message/detail?id=001&title=%E6%B6%88%E6%81%AF1

query属性，?id=001&title=%E6%B6%88%E6%81%AF1这个段是detail路由的一部分，

拼接在message的下路由，共有三级路由了home》message》detail

• router文件夹下面index.js,配置三级路由

// 导入路由插件
import VueRouter from "vue-router"

// 导入组件
import About from '../pages/About'
import Home from '../pages/Home'
import TongZhi from '../pages/TongZhi'
import Message from '../pages/message'
import Detail from '../pages/detail'
// 实例化VueRouter
export default new VueRouter({
 // 配置路由规则，routes是VueRouter构造函数的配置。和vue的data一样的内置配置
 routes:[
  {
   // 配置浏览器的路径名字，比如
   // http://localhost:8080/#/about
   path:'/about',
   // /about这个路径会显示下面About组件
   component:About
  },
  {
   path:'/home',
   component:Home,
  //  http://localhost:8080/#/home/tongzhi
  // 这种信息的多级路由，用children属性，path不能添加/，因为vue会自动解析添加/,
  // 然后把前面的目录进行拼接，结果是 http://localhost:8080/#/home/tongzhi
   children:[
    {
     path:'tongzhi',
     component:TongZhi
    },
    {
     path:'message',
     component:Message,
     children:[//拼接message这个路由
    //结果是 http://localhost:8080/#/home/message/detail
      {
       path:'detail',
       component:Detail
     }
     ]
    }
   ]
  }
 ]
})

message.vue文件

<template>
  <div>
   <ul>
    <li v-for="m in msg" :key="m.id">
      <!-- 用模板字符串拼接循环获取的{m.id}和{m.title}，
并且将to属性添加冒号，变成v-bind单项数据绑定，
这样就可以解析模板字符串里面的{m.id}和{m.title} -->
        <!-- ？就是query属性，to跳转到detail路由组件，
这个detail路由组件会全部接收这个问号后面的值 

路由跳转，并携带query参数（问号的键和值后面可是说query参数）

-->


 <!--  这是字符串写法，用模板字符串拼{m.id}和{m.title} -->

     <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link>
    </li>
   </ul>
   <router-view></router-view>
  </div>
</template>

<script>
export default {
 data(){
  return {
   msg:[
    { id:'001',title:'消息1' },
    { id:'002',title:'消息2' },
    { id:'003',title:'消息3' },
    { id:'004',title:'消息4' }
   ]
  }

 }
}
</script>

detail.vue文件

<template>
  <div>
   <h2>消息详情：？？？</h2>
   <h2>消息编号：？？？</h2>
  </div>
</template>

<script>
export default {
mounted(){
  console.log(this.$route)
}
}
</script>

现在我们查看一下detail.vue文件 $route有哪些如下：

query.PNG

可以接收到message.vue文件to属性里面的所有值（包括url规则home/message/detail），也可以看到？这个符号后面id和title的值，问号===query，展开看query里面的值（如图，确实是传过来了）

---

能获取到route.query.title）如下

detail.vue文件

<template>
  <div>
   <h2>消息详情：{{$route.query.title}}</h2>
   <h2>消息编号：{{$route.query.id}}</h2>
  </div>
</template>

结果：

query结果.PNG

• 用模板字符串拼接循环获取的{m.id}和{m.title}，并且将to属性添加冒号，变成v-bind单项数据绑定，这样就可以解析模板字符串里面的{m.id}和{m.title}
  ？就是query属性，to跳转到detail路由组件
  这是字符串形式，有方向单引号（简书显示不出反向单引号）
  <router-link :to="/home/message/detail?id=${m.id}&title=${m.title}">{{m.title}}</router-link>

message.vue文件

这是对象形式，用query关键属性

 <!-- 对象方式：
    
    path：就是跳转的路径，
    query就是？，里面可以写参数 -->

     <router-link 
     :to="{
       name:'detail',
       path:'/home/message/detail',
       query:{
         id:m.id,
         title:m.title
       }
     }"
     >{{m.title}}</router-link>

to里面的name：写的是router文件夹下面的index.js路由配置里面的name，如：

router文件夹下面的index.js文件

  {
     path:'message',
     component:Message,
     children:[//拼接message这个路由
      {
       name:'detail', //to里面的name如果是detail会找它，
       path:'detail',
       component:Detail
     }
     ]
    }

添加了name属性名，只要to指定name，就可以跳转到那个路径，现在to里面的name是detail，
和index.js里面的name匹配，然后根据name跳转到个path
path和name只写其中一个也可以(写两个是时候，必须要一致)

---

$route是每个组件自带的，每个组件都有自己的路由规则，即使是普通组件的也有，组件在哪个url下，path的值就和url规则一样，正确的流程是组件的路由规则，决定了url是什么样的

app.vue文件

<template>
  <div>
   <!-- 这是普通的组件，在js里面有在component配置中引入组件 -->
   <Banner></Banner>
   <!-- router-lin相当于a标签，to相当于href，但是to这个属性必须写，不然报错如下： -->
   <!-- [Vue warn]: Missing required prop: "to" -->
   <!-- 这个router-link属性标签，在html解析中最终会变成a标签，所以，css样式会生效 -->
   <router-link to="/about">about</router-link>
   <br>
   <router-link to="/home">home</router-link>
    <!-- router-view这个标签在使用路由组件时要写上，表示要在哪里显示组件标签，
   现在可以看出来，先展示了Banner组件，然后展示router-link里面的内容，
   当点击about或home这两个相当于a标签包裹的标签体时，router-view要展示的组件
  要显示的组件由to里面的值做决定，to里面的值由会跳转到/router/index.js文件去寻找path的值
  path就把对应的component配置的组件展示 -->
   <router-view></router-view>
   <input type="text" v-model="t1">
  </div>
</template>

<script>
import Banner from './components/Banner.vue'
export default {
  components: { Banner },
  data(){
    return {
      t1: 1
    }
  }

}
</script>

<style>
a{
 list-style: none;
 text-decoration: none;
 color: red;
}
</style>

Banner.vue文件

<Banner></Banner>在component配置中引入普通组件，这个组件在首页，所以path是'/'

<template>
<div>
  <h1>这是banner</h1>
  <input type="text" v-model="t1">
</div>

</template>

<script>
export default {
  data () {
    return {
      t1: 1
    }
  },
  mounted(){
    console.log(this.$route,'这是banner 的$route')
  }

}
</script>

this.$route结果

banner的route.PNG

$route是每个组件都有的（如上图），所以我们能看到一些属性，path、query、param这些属性