【前端攻城狮之vue基础】02路由+嵌套路由+路由query/params传参+路由props配置+replace属性+编程式路由导航+缓存路由组件

1.路由简介

• 路由是一条条对应的key-value关系，key就是前端地址栏的路径，value就是对应的组件，用于展示对应内容
• 路由器：统一管理多条路由
• 工作过程：当浏览器的地址发生改变时，对应的组件就会显示

2.路由基本使用

1. 准备路由组件

   //Home组件
   <template><div><h2>我是Home的内容</h2></div>
   </template><script>
   export default {name:'HomeCompo'
   }
   </script>//About组件
   <template><div><h2>我是About的内容</h2></div>
   </template><script>
   export default { name:'AboutCompo'
   }
   </script>

2. 创建并保留路由配置文件，编写路由规则

   //引入路由需要用到的组件
   import Home from '../components/Home'
   import About from '../components/About'
   //引入路由工具库
   import VueRouter from 'vue-router'
   //创建并暴露路由
   const router=new VueRouter({//配置路由规则routes:[{path:'/home',component:Home},{path :'/about',component:About}]})
   export default router
   

3. 在main.js中挂载路由

   import Vue from 'vue'
   import App from './App.vue'
   // 引入vue-router组件库
   import VueRouter from 'vue-router'
   //引入路由配置文件
   import router from './router'Vue.config.productionTip = false
   // 使用插件
   Vue.use(VueRouter)
   new Vue({render: h => h(App),router, //挂载路由
   }).$mount('#app')

4. 在App.vue中使用 router-link 和router-view标签 放路由的key和 路由的value

    <router-link class="list-group-item" active-class="active" to="/about">About</router-link><router-link class="list-group-item " active-class="active" to="/home">Home</router-link><!-- 显示路由内容的标签 --><router-view></router-view>
   

5. 路由的注意事项

   1. 路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹。
   2. 通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。
   3. 每个组件都有自己的$route属性，里面存储着自己的路由信息。
   4. 整个应用只有一个router，可以通过组件的$router属性获取到。
      homeRoute===aboutRoute
      false
      homeRouter===aboutRouter
      true

   3.嵌套路由

   1. 配置路由规则，使用children配置项：

      routes:[{path:'/about',component:About,},{path:'/home',component:Home,children:[ //通过children配置子级路由{path:'news', //此处一定不要写：/newscomponent:News},{path:'message',//此处一定不要写：/messagecomponent:Message}]}
      ]
      

   2. 跳转（要写完整路径）：

   <router-link to="/home/news">News</router-link>
   

   4.传递路由的query传参

   有两种query传参方式，分别是字符串传参和对象传参

   给detail传递参数

   <!-- 跳转并携带query参数，to的字符串写法 -->
   <router-link :to="/home/message/detail?id=666&title=你好">跳转</router-link><!-- 跳转并携带query参数，to的对象写法 -->
   <router-link :to="{path:'/home/message/detail',query:{id:666,title:'你好'}}"
   >跳转</router-link>
   

   在detail接受参数

   $route.query.id
   $route.query.title
   

   # 5.传递路由的params参数

   有两种params传参方式，分别是字符串传参和对象传参

   给Deatil组件传递参数

   第一步，在router.js的配置文件中声明参数的占位符

   {path:'/home',component:Home,children:[{path:'news',component:News},{component:Message,children:[{name:'xiangqing',path:'detail/:id/:title', //使用占位符声明接收params参数component:Detail}]}]
   }
   

   第二部，跳转并携带参数

    <!-- params传参的模板字符串写法 --><router-link :to="`/home/message/detail/${m.id}/${m.title}`">跳转{{m.title}}</router-link><!-- params传参的对象写法 --><!-- 跳转并携带params参数，to的对象写法 --><router-link:to="{name: 'xiangqing',//不能使用path配置params: {id: m.id,title: m.title,},}">跳转</router-link>
   

   第三步，接受使用参数

   $route.params.id
   $route.params.title
   

   特别注意，当使用params传参时，若使用to的对象写法，则不能使用path配置，只能使用name命名路由配置

   6.路由的props传参配置

   路由的props的出现是为了让路由组件能够更方便的接受参数

   props配置有三种写法，分别是对象，布尔值和函数写法

   {name:'xiangqing',path:'detail/:id',component:Detail,//第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件// props:{a:900}//第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件// props:true//第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件props(route){return {id:route.query.id,title:route.query.title}}
   }
   

   7.路由router-link标签的replace属性

   1. 作用：控制路由跳转时操作浏览器历史记录的模式
   2. 浏览器的历史记录有两种写入方式：分别为push和replace，push是追加历史记录（入栈），replace是替换当前记录（先出栈顶元素，再入栈）。路由跳转时候默认为push
   3. 如何开启replace模式：<router-link replace .......>News</router-link>

   8.编程式路由导航

   不使用router-link标签进行路由跳转，而是使用$router提供的api进行跳转，push函数是入栈跳转，replace函数是替换跳转

   配置对象的写法与router-link to熟悉配置对象的写法一致

   //$router的两个API
   this.$router.push({name:'xiangqing',params:{id:xxx,title:xxx}
   })this.$router.replace({name:'xiangqing',params:{id:xxx,title:xxx}
   })
   this.$router.forward() //前进
   this.$router.back() //后退
   this.$router.go() //可前进也可后退 正数前进几步，负数后退几步
   

   9.缓存路由组件

   当一个路由组件A中出现输入类元素 ，比如文本框时，假如我们从A路由切换到B路由，因为路由切换实际上是销毁了路由组件，所以之后再重新切回A路由，A路由组件的文本框数据已经丢失了。所以我们要对A路由进行缓存，缓存的方式是使用keep-alive标签，包裹住A组件的显示区域，配合include属性使用

   include属性值是组件名，而不是命名路由的名字

   如果想要缓存多个路由组件，可写:include=['News','Message']   
   <keep-alive include="News"> <router-view></router-view>
   </keep-alive>