Vue.js入门教程（六）

目录

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">我的订单        // to 的时候要带上全路径

---

路由传参

query

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

// html 代码

我的订单

// js 代码

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

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

// html 代码

我的订单    

// js 代码

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

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

// html 代码

我的订单

// 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 文件

我的订单

        (3)：js 文件

vue2 的方式

vue3的方式

        (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

---

路由缓存

        介绍：

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

        语法：

   

---

全局前置路由

        介绍

对路由组件进行权限控制

        配置路由器文件

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;