目录

Vue中的路由

1：安装

2：配置

路由嵌套

路由传参

query

params 

router 的 replace

编程式路由导航

push / replace

路由的前进后退函数

路由缓存

全局前置路由

Vue中的路由

1：安装

npm install vue-router

// npm i vue-router@3.5.1 -S  // 安装旧版本

2：配置

新建 src/router/index.js 路由器文件

配置路由器文件

• vue2的方式

•  vue3的方式

配置main.js

• vue2的方式

• vue3的方式

配置App.vue 页面

查看页面效果

路由嵌套

配置路由器文件

 跳转

<router-link to=”/home/order”>我的订单</router-link>        // to 的时候要带上全路径

路由传参

query

1：代码写死的方式  传字符串        –参数显示在URL上

// html 代码

<router-link to=”/home/order?o_id=123&user_id=zs”>我的订单</router-link>

// js 代码

console.log(this.$route.query);

2：动态的方式        传字符串        –参数显示在URL上

// html 代码

<router-link :to=”`/home/order?o_id=${orderId}`”>我的订单</router-link>    <!– orderId 为 data 中的数据–>

// js 代码

console.log(this.$route.query);

3：传对象        –参数显示在URL上

// html 代码

<router-link :to=”{ path: ‘/home/order’, query: { o_id: 123 } }”>我的订单</router-link>

// js 代码

console.log(this.$route.query);

params 

方式一：传字符串        –参数显示在URL上

        (1)：配置路由器文件

         (2)：html 文件       

                * 写死的方式

                 * 动态的方式

          (3)：js 文件

        console.log(this.$route.params);

 方式二：传对象         –参数在URL上不显示

        (1)：配置路由器文件

        (2)：html 文件

        (3)：js 文件

        console.log(this.$route.params);

router 的 replace

网页后退时删除之前的历史页面

编程式路由导航

路由跳转通过js事件函数的跳转方式，而不是通过router-link 就是编程式路由。

push / replace

        (1)：配置路由器文件

        (2)：html 文件

<button @click=”toMyOrder”>我的订单</button>

        (3)：js 文件

vue2 的方式

<script>
export default {
    data() {
        return {
            orderId: 123
        }
    },
    methods: {
        toMyOrder() {
            this.$router.push({
            // this.$router.replace({
                name: 'myName', params: {o_id: this.orderId}    // 这里可以使用 query 的方式，也可以使用 params 的方式
            })
        }
    },
    mounted() {
        this.toMyOrder();       // 写在 mounted 方法中， 自动执行页面跳转
    }
}
</script>

vue3的方式

<script setup>
import { useRouter } from 'vue-router'
const router = reactive(useRouter());
function toMyOrder(item) {	// 动态接收菜单数据的话就加个参数
    router.push({ name: item.name })	// item.name, 后台返回的跳转名称
}
</script>

        (4)：接收参数的 js 

        console.log(this.$route.params);        // vue2 的方式

        console.log(router.currentRoute);       // vue3 的方式

路由的前进后退函数

this.$router.forward()         //前进
this.$router.back()             //后退
this.$router.go(-1)              //前进：正数1、2 或者后退：负数-1、-2

路由缓存

        介绍：

路由被切换后的页面被销毁了，路由缓存是让不展示的路由组件保持挂载在页面，不被销毁

        语法：

<keep-alive>
<!– <keep-alive include=”Order”>   include 只缓存指定的组件，Order是组件名称  –>
    <router-view></router-view>
</keep-alive>

全局前置路由

        介绍

对路由组件进行权限控制

        配置路由器文件

const router = new VueRouter({
    routes: [
        {
            path: '/home',
            component: Home,
            children: [
                {
                    name: "myName",             
                    path: "order",
                    component: Order,
                    meta: {isAuth: true}        //  使用 meta 属性，定义一个变量，true表示需要鉴权
                }
            ]
        }
    ]
});

/**
 * to: 表示要去的组件
 * next: 表示放行
 */
router.beforeEach((to, from, next) => {
    if (to.meta.isAuth) {   // 需要鉴权组件
        if (localStorage.getItem("token") === '1') {    // 获取 localStorage 中的 token，如果登录了，就放行
            next();
        } else {
            alert("请登录")                             // 没有登陆就给个提示
        }
    } else {                                            // 不需要鉴权的组件，直接放行
        next();
    }

});

export default router;