VueRouter

VueRouter

路由(route)可以理解为是一组对应关系，多个路由需要同router进行管理，前端路由的对应关系是路径和组件,路由器（router）是用来管理路由的。

路由的使用步骤
1.先安装vue-router插件 ;使用命令npm i vue-router
2.使用插件 Vue.use(VueRouter)
3.编写路由配置项
4.使用router-link ......to..实现切换
5.指定展示视图的位置<router-view/>

编写路由配置项
1先引入路由插件 
import VueRouter from ("vue-router")
2引入用到的组件
import a from "./路径"
3.创建一个路由实例
const router = new VueRouter({
//4.配置路由规则
routes:[
    {
        path:'',
        component:a
	},
	 {
        path:'',
        component:a
	},
]
})
5.暴露router
export default router

路由在单页面应用中切换的时候，不显示出来的路由组件默认是被销毁的，当需要用到的时候在重新挂载，每一个组件都有自己的一个$route属性，在这个属性里面可以查看自己的路由信息，但是在整个应用中只有一个router，可以通过$router属性获取到。

嵌套（多级）路由

嵌套路由就字面理解，路由嵌套路由，一个路由里面还要一个路由，如果设置到嵌套路由，就要在路由规则中配置子路由的路由规则

const router = new VueRouter({
routes:[
    {
        path:'',
        component:a,
        children:[
            {
              path:'',
              component:component,
            }
        ]
	},
	 {
        path:'',
        component:a
	},
]
})

且在引用的时候要将上级路由的路径携带上

<router-link to="/a/component"><router-link>

路由传参

路由传参有两种方式：query传参和params传参

使用query传参，可以配合path和name使用
path-query传参：参数会被拼接在浏览器的地址栏中，且刷新页面也不会丢失

使用params传参只能用name，不能和path搭配使用，name指的是命名路由的名字
name-params传参：刷新页面后数据会丢失

命名路由

命名路由 就是有名字的路由,我们可以先给路由起一个名字,然后就可以通过路由名字直接打开新的路由了。

const router = new VueRouter({
routes:[
    {  
    //命名路由
        name:''
        path:'',
        component:a,
        children:[
            {
              path:'',
              component:component,
            }
        ]
	},
	 {
        path:'',
        component:a
	},
]
})

编程式导航

除了使用 <router-link> 创建 a 标签来定义导航链接，还可以借助 router 的实例方法，通过编写代码来实现。this.$router.push()跳转到指定路由，会向history栈添加一个新的记录，当用户点击浏览器回退按钮的时候，可以回到跳转前的url。

this.$router.push({
                    name:'mya',
                    query:{id:1},
                    // 参数是一次性携带刷新页面 params失效
                    params:{
                        name:"terry"
                    }
                })

路由守卫

路由守卫：用来保护路由的权限

全局路由守卫

beforeEach():全局前置路由守卫，在初始化的时候被调用，每次路由切换之前被调用，传入一个回调函数，回调函数里面接收三个参数：to,from,next
afterEach():后置路由守卫，在初始化的时候被调用，每次路由切换之后被调用，传入一个回调函数，回调函数里面接收二个参数：to,from

独享路由守卫：只有前置，没有单独的后置路由守卫，但是可以和全局的路由守卫配合

beforeEnter():每次路由切换之前被调用，传入一个回调函数，回调函数里面接收三个参数：to,from,next

组件内路由守卫

beforeRouterEnter():通过路由规则进入该组件的时候被调用，传入一个回调函数，回调函数里面接收三个参数：to,from,next
afterRouterLeave():通过路由规则离开该组件的时候被调用，传入一个回调函数，回调函数里面接收三个参数：to,from,next

路由模式

路由模式有两种，一种是hash模式，另一种是history模式

hash模式：默认开启的就是hash模式，在地址栏携带一个#,#后面的路径都是以hash值的形式存储的，不包含在HTTP请求中也就是不会带给服务器，hash模式的兼容性比较好，但是在地址栏中会一直都携带着一个#，不是特别美观，如果以后将地址通过第三方手机APP分享，如果app的校验比较严格的话，地址会标记为不合法

history模式，地址栏不带#，相比之下history模式的兼容性比较差，在应用部署上线的时候需要后端人员的支持，来解决页面刷新404的问题（可以使用中间组件）