Vue-router

一、vue路由

Vue.js 路由允许我们通过不同的 URL 访问不同的内容。

通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）。

Vue.js 路由使用前需要载入vue-router库

二、路由配置 /router/index

1、普通路由配置

{
        path: '/user', //配置的路径
        name: 'user', //名称
        component: () => import('xxx) 
}

2、路由传参

   {
        path：“/product/:id”，
 
        name:"product",
 
        component:xxx
 
        }
 
        <router-link to="/product/abc">
        //在页面中获取：$route.params.id 
}

3、

404：要配置在最后面 { path:"*"}

4、编程式路由跳转

前进   forward()    go(1)

后退   go(-1)    back()

切换路由    push("/about")

替换路由    replace("/about")

三、路由信息

路由参数 params

查询 query

地址 path

全地址 fullPath

名称 name

四、路由守卫
1、组件内部

          进入前：beforeRouterEnter（to，from，next）

                        to 要进入的路由

                        from 从哪个页面进入

                        next 下一步  

                        next（）进入to页面

                        next（true）进入to页面

                        next（false）不跳转

                        next（“/login”）跳转到登录

            离开前 ：beforeRouterLeave

            更新前：beforeRouterUpdate

2、全局
        beforeEach（（to，from，next）=>{}）

        afterEach

3、 独享

        beforeEnter（）

作用：进入离开页面前做出拦截，处理事情（跳转提示，权限检查）

五、路由查询参数

传递
next("/login?redirect=/cart")

获取
var redirect = this.$route.query.redirect||'/user'