Vue Router详解：配置、跳转、动态路由与守卫实战-优快云博客

本文链接：https://blog.youkuaiyun.com/xh0112/article/details/116049338

Vue路由

vueRouter

vueRouter

路由的配置

引入vue-rotuer.js 文件

<script src='vue.js'></script>
<script src='vue-router.js'></script>

创建路由组件模板
每个组件必须存在一个唯一的根元素

const 组件名 = {
    template:`组件模板`
}

创建路由配置
path属性：匹配的路由； component属性：匹配到对应路由渲染对应的组件

const routes = [
    {
        path:'/path1',
        component:组件名1
    },{
        path:'/path2',
        component:组件名2
    }
]

创建路由的实例化对象

const router = new VueRouter({
    routes
})

在vue实例中注册路由

const app = new   Vue({
    ...,
    router
})

在 div#app 中添加一个 <router-view>标签用来渲染路由组件

<div id='aqpp'>
    <router-view></router-view>
</div>

路由跳转

声明式路由：通过 <router-link>标签的to属性实现 : to绑定的是路由

<router-link to='/path1'>path1</router-link>
<router-link to='/path2'>path2</router-link>

编程式路由（编程式导航）: 通过 this.$router.push('path')

 order(){
    this.$router.push('order')
},
news(){
    this.$router.push('news')
}

<!-- 
        vue 中路由的跳转方式：
            1. 声明式路由 ： 通过 router-link 标签实现的
            2. 编程式路由 ： 通过 路由对象的方法  $router.push() 方法实现的


        路由传参：
            1. 通过query实现 ：  query 传参 和 path 结合使用
            2. 通过params实现 ： parmas 传参 和  name 结合使用 （name 就是命名路由的一个属性， 通过name属性命名路由）
            3. path 结合 params 使用， 则params会被忽略
     -->

命名路由

命名路由通过 name属性可以给路由起别名
path属性，name属性，component 属性三者的属性值保持一致

const routes = [
    {
        path:'/path1',
        name:'path1',
        component:组件名1
    },{
        path:'/order',
        name:'Order',
        component:Order
    }
]

路由重定向

通过一个属性 redirect 进行路由重定向

const routes = [
    {
        path:'/path1',
        name:'path1',
        //  当匹配到路由 path1时， 可以重定向到 path2
        redirect:'/path2'
        //  也可以重定向到命名路由
        redirect:{name:'Order'}
        component:组件名1
    },{
        path:'/order',
        name:'Order',        
        component:Order
    }
]

动态路由

通过 path/:id 实现动态路由，匹配的路径不同。但是渲染的是同一个模板
获取动态路由的参数：
- 在模板中：通过 $route.params.id 获取
- 在方法中：通过 this.$route.params.id 获取

const routes = [
    {
        path:'/path1/:id',
        name:'path1',
        component:组件名1
    },{
        path:'/order/2',
        name:'Order',
        component:Order
    }
]

动态路由渲染的是同一个模板

获取动态路由的参数：

在组件模板中使用通过 $route.params.id
在方法中使用通过 this.$route.params.id

区分两个对象：
$route : 代表的是当前路由信息对象
$router : 代表的是路由对象

侦听器 watch 可以监听路由的改变, 也可以监听data 中数据的改变
事件处理程序中接受的参数是不同的

监听的是data中的数据的改变，则 handler(newValue, oldValue)
监听的是路由的改变：则 handler(to, from) 从哪个路由跳转到哪个路由（从哪来到哪去）

路由传参

通过 query 传递参数： query 是一个对象; 传递的参数会拼接在路径上url
query结合path使用; 如果 path和 params 一起使用，则params 会被自动忽略

在 router-link 中使用

<!--  -->
<router-link :to='{
                path:"/order", 
                query:{
                    id:100,
                    user:"li"
                }
}'>订单</router-link>

也可以在编程式路由中

news(){
    this.$router.push({
        path:'/news',
        query:{
            id:2,
            type:'娱乐'
        }
    })
}

通过 params 传递参数： params 也是一个对象 ; 传递的参数是不会显示在路径URL 上
params结合name使用， name是命名路由

在 router-link 中使用

<router-link :to='{
            name:"Order", 
                params:{
                    id:100,
                    user:"li"
                }
}'>订单</router-link>

也可以在编程式路由中

news(){
    this.$router.push({
        name:'News',
        params:{
            id:2,
            type:'娱乐'
        }
    })
}

嵌套路由

嵌套路由（子路由）通过 children 属性定义 ;

如果父路由是顶级路由，则需要在父路由的组件模板中添加 router-view 标签来渲染子路由模板

 const Order = {
    template: `<div>
        我的订单
        <router-view></router-view>
    </div>`
}

子路由的路径和父路由的路径会自动拼接：比如父路由 path:"/order"，子路由是 path:‘pay’，自动拼接为 ‘/order/pay’

const routes = [
    {
        path:'/order',
        component:Order,
        children:[
           {
               path:'pay',
               component:Pay
           }
        ]
    },{
        //  该路由不是 order 的子路由
        path:'/order/list',
        component:List
    }
]

获取路由参数

获取query参数：(使用query传参)
- 模板语法中：$route.query.key
- 在组件中: this.$route.query.key
获取params参数：(使用params传参)
- 模板语法中：$route.params.key
- 在组件中: this.$route.params.key
获取动态路由/path/:id：
- 模板语法中：$route.params.key
- 在组件中: this.$route.params.key

导航守卫

导航守卫：路由的生命周期钩子函数

导航守卫：

全局守卫：全局守卫是路由对象的 router (路由的实例对象)
前置全局守卫 beforeEach
全局解析守卫 beforeResolve
全局后置守卫 afterEach

全局守卫: 是路由对象的方法

全局前置守卫： router.beforeEach((to, from, next) => {})
重点掌握全局前置守卫：权限判断都是在这个钩子中进行的

    router.beforeEach((to, from, next) => {
       
        // to： Route: 即将要进入的目标 路由对象
        // from :  Route: 当前导航正要离开的路由
        // next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数; 作用：放行（重定向）
    })

全局解析守卫： router.beforeResolve((to, from, next) => {}) 参数解析和上边一样
全局后置钩子： router.afterEach((to, from) => {}) : 和守卫不同的是，这些钩子不会接受 next 函数也不会改变导航本身。

路由独享守卫 beforeEnter ：是路由配置中专用的守卫

const rotues = [
    {
        path:'/order',
        component:order,
        // 路由独享守卫
        beforeEnter(to, from, next){
            // 参数解析和 beforeEach() 一样
        }
    }
]

组件内守卫：是路由组件模板中使用的守卫

const order = {
    template:'',
    // 当进入该组件匹配的路由时触发
    beforeRotuerEnter(to, from, next){

    },
    //  动态路由切换时 /foo/:id，会触发，比如 /foo/1 进入 /foo/2
    beforeRouterUpdate(to, from, next){

    },
    //  当离开当前组件匹配的路由时触发
    beforeRouterLeave(to, from, next) {

    }
}