路由组件。 0、创建2个路由组件： 1、page准备两个路由组件。
1、router/index.js里面 1、创建路由器：export default new VueRouter({})。暴露并且创建路由器router。 2、创建路由：route:[{ path:'/a',component:'b'}] 创建路由以数组对象形式，一个数组对象path是路径，component是组件。
2、去main.js下，root 1、导入vue-router： 2、先让vue使用vue-router：Vue.use(VueRouter) 3、引入router。 4、挂在router。：router:router
3、去App.vue （也就是该引用的地方引用） 1、跳转路由：router-link to='/about' 目标路径 == ：to={path:'/about'} 2、显示路由：router-view
注意： 1、路由组件和一般组件时不同滴。位置不同：路由组件放在page下面。2、路由组件引用的是：，渲染时。一般组件就是 <组件名称>就是引用了。 2、切换路由组件，是调用理由组件的生命周期函数，默认是被销毁的，需要的时候再去挂载。 3、每个路由组件都有自己的router属性获取到。
嵌套路由： 0、写组件路由。 1、写路由和路由器。 录音children:[{},{}] path中不能添加/ 3、引用：route-link to='/home/message', 必须加绝对路径。
一、传递query参数。（query询问，查询，提问）
3在router-link里面添加。
1、跳转路由并且携带query参数，to的字符串写法。
：to =" ?id=${m.id}&${m.title}"
2、跳转并携带query参数，to的对象写法。 :to ="{ path:'home/message/detail', query:{id:666,title:'你好'} }"
二、接受参数： 0在组件里面写,query。route.query.id route.query.title
命名路由：(简化路由的跳转) 在1里面 路由和路由器里面 route:{name:'guanyu'} 在3里面：route-link :to={name:helo。}
路由的params参数。 一、声明参数：path:'deatail/:id/:title。使用占位符声明接受params参数。 二、传递参数：router-link :to="{}" ， router-link :to="{}" 路由携带params参数，若使用to对象写法，必须使用name配置项， 三、接受参数：$route.params.id
传参会导致复杂的耦合： 在路由规则中开启：{ props:true } 在组件使用时，接受。{ props:['mid']} 。使用： $this.params.true
一、在hash地址中：在/后面的参数，叫路径参数。 在路由参数对象（route.query来访问查询参数。
三、this.$route，中，path只是路径部分；fullPath是完整地址(包括参数)：
声明式导航： 点击链接实现导航方式，叫做声明式导航。 比如：在普通网页中，用户点击，vue中链接。
编程式路由导航： 就是不用route-link的导航，不用人工点击导航。 普通网页中location.href跳转到新页面的方式，属于编程时导航 vue-router提供了非常多的api，最常用的是push,replace，go。
button @click="gotoLK" gotoLK(){ this.router.push('/movie/1')} this.router.push('hash')}通过编程式导航API，导航跳转到指定哈希地址，并且增加一条历史记录。
this.$router.replace('hash地址') 跳转到指定的hsh地址，并替换掉当前的历史纪录。
this.$router.go(-1)
可以在浏览器是中后退，-1：后退一层。没有双引号。 -100：没有这么多层，那么就会原地不动。 1：前进以为， 但是在实际工作中， @click="this.router.forward
缓存路由组件： 1、作用：让不展示的路由保持挂在，不被销毁。 2、具体编码：
location.href
location.hash
路由组件： 1、作用：对路由进行 权限控制。 2、分类：全局守卫（全局前置首位，全局后置首位），独享首位，组件内守卫。
----》 导航守卫（变的安全）---》 main 后台主页，Login登录页面。
导航首位（检测到未登录强制跳转到登录页。）
3、全局守卫：
1、全局前置守卫：：：
router.beforeEach(fn) router:路由对象实例的方法。
const router =new VueRouter({})
router.beforeEach((to,from ,next)'')
a->c:to是c，from是a。next小括号就是允许。
to:表示将要访问的路由信息对象。
from：表示将要离开的路由信息对象。
next的三种方式：：：
1、拥有后台主页的访问权限。
2、用户没有后台的访问权限：next('/login')
3、不允许跳转后台主页，放在当前页面:next(false)。
只要出发路由的跳转，必然出发function的回调。
//初始化的时候执行、每次路由切换前执行。
next()//放行。
