【前端攻城狮之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', //此处一定不要写：/news
      				component:News
      			},
      			{
      				path:'message',//此处一定不要写：/message
      				component: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>