vue2-3随笔 组件化/路由

0.前言

　　（1）安装   npm i vue-router

　　（2）使用

　　　　1. main.js：

　　　　　　import VueRouter from 'vue-router' 

　　　　　　Vue.use(VueRouter)

　　　　2. route/Index.js（以下统称route文件）

　　　　　　import VueRouter from 'vue-router'

　　　　　　const router = new VueRouter({ ...  })

　　　　　　export default router

　　　　3. 需要切换路由的文档

　　　　　　About

　　　　4. 需要展示的位置

　　（3）注意点

　　　　1.路由组件通常存放在```pages```文件夹，一般组件通常存放在```components```文件夹。

　　　　2. 通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。

　　　　3. 每个组件都有自己的```$route```属性，里面存储着自己的路由信息。

　　　　4. 整个应用只有一个router，可以通过组件的```$router```属性获取到。

1.路由具体使用

　　（1）.多级路由，跳转时：to绑定的应该是从跟路由开始到结束的完整路径

　　　　routes:[{

　　　　　　path:'/about',

　　　　　　component:About,

　　　　},{

　　　　　　path:'/home',

　　　　　　component:Home,

　　　　　　children:[{//通过children配置子级路由

　　　　　　　　path:'news', //此处一定不要写：/news

　　　　　　　　component:News   },]}]

　　（2）路由跳转传参

　　　　1.可以再路由后直接接上   

　　　　　　普遍写法：  News

　　　　　　对象写法： 

　　　　　　　　　　:to="{

　　　　　　　　　　　　path:'/home/message/detail',

　　　　　　　　　　　　query:{ ... }}"

　　　　2.query参数： query:{id:666,title:'你好'}

　　　　　接收时： $route.query

　　（3）路由命名与传params参

　　　　当需要跳转的路由名字过长时，可以在route文件配置router对象时，对每一个路由命名。　{  name:'xiangqing',path:'detail/:id/:title', //使用占位符声明接收params参数    component:Detail   }

　　　　类似query：  params:{id:666,title:'你好' }

　　　　特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！

　　（4）props参数

　　　　1.死数据：props：｛a：90｝

　　　　2.params数据：props:true     //把路由收到的所有params参数通过props传给组件，接收使用即可

　　　　3.query数据：

　　　　　　props(route){

　　　　　　　　return {}}

　　（5）replace属性

　　　　作用：控制路由跳转时操作浏览器历史记录的模式

　　　　浏览器的历史记录有两种写入方式：分别为```push```和```replace```，```push```是追加历史记录，```replace```是替换当前记录。路由跳转时候默认为```push```

　　　　如何开启```replace```模式：```News```

　　（6）编程式路由导航

　　　　作用：不借助``` ```实现路由跳转，让路由跳转更加灵活

　　　　五个可使用的API

　　　　　　this.$router.push()    // 追加历史记录

　　　　　　this.$router.replace()   //替换当前记录

　　　　　　this.$router.forword()   //前进

　　　　　　this.$router.back()    //后退

　　　　　　this.$router.go()   //既可前进也可后退

　　（7）缓存路由组件

　　　　作用：让不展示的路由组件保持挂载，不被销毁。