vue中路由相关的知识

使用路由的具体步骤：

使用路由首先第一步要从插件中导入vueRouter

import VueRouter from 'vue-router';

然后去配置其中的routes

再导出router，在入口文件中导入router，然后use（router）

路由模式有两种：hash，history

hash模式：

优点：兼容性好，几乎可以在任何环境下使用，不需要其他服务器配置

               变化可以在url上看出，支持前进后退

缺点：不好看，有碍美观，搜索引擎对hash不太好

history模式：

优点：美观，对搜索引擎更加友好

缺点：服务器需要对所有路由都适应，一般需要后端路由进行配置

               变化不能够在URl上看出

            不能前进后退，需要借助api封装才能去实现

路由传参有两种：query，pramas

query传参：

1，直接传参

 <router-link to="/home/ikun1?id=12343&&name=zhangsan">Ikun1</router-link>

2，对象写法

<router-link :to="

        {

            path:'/home/ikun1',

            // 简化路由跳转，使用路由命名

            // name:'IkunFirst',

            id:1234,

            name:'zhangsan'

        }">Ikun1</router-link>

pramas传参：

<router-link :to="{

            name:'ikun2',

            // parms对象写法不能再有path，只能用命名法跳转

            parmas:{

                id:1234,

                name:lisi

            }

        }">Ikun2</router-link>

query传参子组件接受的两种方式：query：$router.query.name      pramas:$router.pramas.name

可以在路由routes中配置简化接受传参利用props

第一种写法：但是这种只可以接受params传过来的数据

                    props:true,

第2种写法：这种可以接受params和query传过来的数据

                    props($router) {

                        return {

                            id: $router.query.id,

                            name: $router.query.name

                        }

                    },

路由有几个路由守卫

全局前置路由守卫：

router.beforEach((to, from, next) => {

    if (to.meta.isAuth) {

        if (localStorage.getItem("token") == "ikun1") {

            next()

        }

    } else {

        next()

    }

})

全局后置路由守卫：

独享守卫也是在routes中配置，只对独个组件发挥作用

beforEnter: (to, from, next) => {

                        alert("颠覆迎来虚伪的拥护，黄昏见证真正的信徒");

                    }

组件中还有两个守卫

beforeRouterEnter(){

    console.log('通过路由规则进入组件时调用');

   },

   beforRouterleave(){

    console.log('通过路由规则离开组件时调用');

   }

此外还有两个生命周期函数，为路由专享

activated(){

   },

   deactivated(){

   },

路由跳转有两种方式：声明式导航，编程式导航

声明式：<router-link to="/home/ikun1">Ikun1</router-link>

编程式：<router-link @click="goikun2">ikun2</router-link>

$router.go()    $router.back()     $router.forward()

        

goikun2(){

        this.$router.push(

            {

                name:'ikun2',

                pramas:{

                    id:1234,

                    name:lisi

                }

            }

        )

    }

路由性能提升：

路由懒加载：components: () => ('../pages/IkunFirst'),

路由缓存：

<keep-alive :include="['IkunFirst']">

            <ruoter-view></ruoter-view>

        </keep-alive>

路由预加载：将需要用的路由提前放置后台进行加载

代码分割：将不同模块的路由组件分割成独立的文件，而不是用到那个组件进行全部加载。

路由配置代码

// 从插件中引入vuerouter

import VueRouter from 'vue-router';

// 配置路由相关信息

const routes = [{

            // 根组件路由重定向

            Path: "/",

            redirect: "/home",

        },

        {

            Path: '/home',

            name: 'Home',

            // 路由懒加载，优化性能，但是首次加载会比较慢，一般适用于大型复杂组件

            components: () => ('../components/Home'),

            // Home组件下的子路由组件配置

            children: [{

                    Path: 'ikun1',

                    name: "IkunFirst",

                    components: () => ('../pages/IkunFirst'),

                    // 自定义属性配置

                    meta: {

                        // 鉴权属性布尔值判定

                        isAuth: true,

                    },

                    beforEnter: (to, from, next) => {

                        alert("颠覆迎来虚伪的拥护，黄昏见证真正的信徒");

                    }

                },

                {

                    Path: 'ikun2',

                    // Path:'ikun2/:id/:name',

                    name: "IkunSecond",

                    components: () => ('../pages/IkunSecond'),

                    // 第一种写法：但是这种只可以接受params传过来的数据

                    // props:true,

                    // 第2种写法：这种可以接受params和query传过来的数据

                    props($router) {

                        return {

                            id: $router.query.id,

                            name: $router.query.name

                        }

                    },

                    meta: {

                        isAuth: true,

                    }

                }

            ]

        },

        {

            Path: "/about",

            name: 'About',

            components: () => ("../components/About")

        },

    ]

    // 全局前置路由守卫

router.beforEach((to, from, next) => {

    if (to.meta.isAuth) {

        if (localStorage.getItem("token") == "ikun1") {

            next()

        }

    } else {

        next()

    }

})

// 配置路由实例

const router = VueRouter({

    // 历史模式

    mode: 'history',

    routes

})

export default router

部分组件代码

<template>

    <div>

        <router-link to="/home/ikun1">Ikun1</router-link>

        <router-link to="/home/ikun1?id=12343&&name=zhangsan">Ikun1</router-link>

        <!-- 子组件接受参数

        $router.query.id -->

        <router-link :to="

        {

            path:'/home/ikun1',

            // 简化路由跳转，使用路由命名

            // name:'IkunFirst',

            id:1234,

            name:'zhangsan'

        }">Ikun1</router-link>

        <router-link replace to="/home/ikun2/id/name">Ikun2</router-link>

        <router-link :to="{

            name:'ikun2',

            // parms对象写法不能再有path，只能用命名法跳转

            parmas:{

                id:1234,

                name:lisi

            }

        }">Ikun2</router-link>

        <!-- 子组件接受参数

        $router.parms.id -->

        <router-link @click="goikun2">ikun2</router-link>

        <!-- 缓存路由组件IkunFirst -->

        <keep-alive :include="['IkunFirst']">

            <ruoter-view></ruoter-view>

        </keep-alive>

    </div>

</template>

<script>

export default {

   name:'Ikun',

   methods:{

    goikun2(){

        this.$router.push(

            {

                name:'ikun2',

                pramas:{

                    id:1234,

                    name:lisi

                }

            }

        )

    }

   },

   beforeRouterEnter(){

    console.log('通过路由规则进入组件时调用');

   },

   beforRouterleave(){

    console.log('通过路由规则离开组件时调用');

   }

}

</script>