什么是路由

路由的本质就是一种对应关系，比如说我们在url地址中输入我们要访问的url地址之后，浏览器要去请求这个url地址对应的资源。
那么url地址和真实的资源之间就有一种对应的关系，就是路由。

路由分为前端路由和后端路由:

  1. 后端路由是由服务器端进行实现，并完成资源的分发
    后端路由性能相对前端路由来说较低，所以，我们接下来主要学习的是前端路由
  2. 前端路由是依靠hash值(锚链接)的变化进行实现
    前端路由的基本概念：根据不同的事件来显示不同的页面内容，即事件与事件处理函数之间的对应关系
    前端路由主要做的事情就是监听事件并分发执行事件处理函数

vue3 安装路由

查看自己项目目录中是否有route文件,安装 route 后会有生成该文件

方法一：使用 vue ui 安装

在当前项目文件夹使用cmd命令，然后输入vue ui

打开之后是这个页面

route 路由配置和使用

注:需要配置并且引用后才能生效

一、配置 router 文件中的 index.js

添加相应的路径和名字，参考设置即可

二、使用 router

  1. 查看 main.js 中查看是否引用了，正常安装后会引用

注：必须要在mount之前挂载

1
2
3
4
5
6
import router from './router'
...//其他代码
const app = createApp(App);
app.use(router)
...//其他代码
app.mount('#app');

最后在App.vue里面引用一下组件就把环境都弄好了，记得把之前模板自带的东西清理了就好

1
2
3
<template>
  <router-view/>
</template>
  1. 在 VUE 界面中引用

在 template 中设置 点击事件

1
<button @click="cliec">123</button>

在 script 中配置跳转

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script>
import { useRouter } from "vue-router"; //引入路由

export default {
  name: 'HelloWorld',
  setup(){
    const router=useRouter();
    let Gotoregister=function(){
    router.push({name: "Registermobile",})}

    return{
      Gotoregister
    };
  },
...//其他代码
}
</script>

route 路由进阶使用之传参功能

安装方法二：

1
npm install vue-router@4 --save

1、跳转模式 A界面－－▶B界面

需要配置 router 的文件夹：

一、router 环境配置

1. 首先我们在文件夹的index.js文件里添加下面的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import { createRouter, createWebHistory } from 'vue-router'
import A from '../views/A.vue'

const routes = [
    // { path: "/", redirect: "/index" },
    {
        path: '/',
        name: 'A',
        component: A
    },
    {
        path: '/B',
        name: 'B',
        component: () =>
            import ('../views/B.vue')
    }
]

const router = createRouter({
    //history模式：createWebHistory , hash模式：createWebHashHistory
    history: createWebHistory(process.env.BASE_URL),
    routes
})

export default router

你会惊奇的发现，Vue对象去哪儿了？在2.x中，我们要使用路由是要先import Vue from ‘vue’把Vue引入进来，接着再Vue.use(VueRouter)去初始化使用路由，是的，vue3中已经没有全局的Vue对象了，并且vue-router也变得模块化了，routes引入页面的两种方式没啥改变，倒是history已经模块化了，它有几种方式，我们使用createWebHistory 就好了，就是浏览器URL后面带不带#号小尾巴的区别

2. 然后在main.js文件里修改添加下面的代码：

使用router的话在createApp模块里挂载一下就好了，需要注意的是必须要在mount之前挂载

1
2
3
4
5
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

3. 最后在App.vue里面引用一下组件：

值此就把环境都弄好了，记得把之前模板自带的东西清理了就好

1
2
3
<template>
  <router-view/>
</template>

二、router 使用

1. 首先在之前创建的A.vue文件中添加下面代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<template>
  <div @click="goToB">Page A</div>
</template>
<script>
import { useRouter } from "vue-router";
export default {
  setup() {
    const router = useRouter();
    const goToB = () => {
      router.push({
        name: "B",
      });
    };
    //也可以这样写
    // function goToB() {
    //   router.push({
    //     name: "B",
    //   });
    // }
    return {
      goToB,
    };
  }
};
</script>

2. 然后在B.vue文件中随便添加点东西，能显示就好：

1
2
3
<template>
  <div>Page B</div>
</template>

3. 最后我们再回看A文件，在methods中引用：

在A文件中你会发现找不到this.$router.push()，是的，vue3中已经没有全局的路由了，需要使用路由，
我需先要引入useRouter模块，接着要在setup函数中定义router，之后再创建一个方法，里面才是我们熟悉的router.push({ name: “B”})，这里不要用this，setup函数中是没有this的，到这里简单的跳转就算完成了。

methods函数里面调用方式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<template>
  <div @click="test">Page A</div>
</template>
<script>
import { useRouter } from "vue-router";
export default {
  setup() {
    const router = useRouter();
    const goToB = () => {
      router.push({
        name: "B",
      });
    };
    return {
      goToB,
    };
  },
  methods: {
    test() {
      /*
       * do something...
       */
      this.goToB();
    },
  },
};
</script>

最终效果如下：

2、重点功能之路由传参

既然在methods函数里可以调用了setup() 里return的方法，那是不是意味着我们可以传点东西过去？

  1. 修改 A.vue 文件:

我们可以传参数过去，这样我们就可以把这个自定义的跳转函数封装起来，动态的传入页面名称和参数就好了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<template>
  <div @click="test">Page A</div>
</template>
<script>
import { useRouter } from "vue-router";
export default {
  setup() {
    const router = useRouter();
    const goToOtherPage = (page_name, value) => {
      router.push({
        name: page_name,
        params: {
          value: value,
        },
      });
    };
    // Composition API 定义methods的方法可以直接写在return之前
    function test() {
      /*
       * do something...
       */
      //要跳转的页面名称
      let page_name = "B";
      //要传的参数
      let value = "hello vue3";
      this.goToOtherPage(page_name, value);
    }
    return {
      goToOtherPage,
      test
    };
  },
//   methods: {
//     test() {
//       /*
//        * do something...
//        */
//       //要跳转的页面名称
//       let page_name = "B";
//       //要传的参数
//       let value = "hello vue3";
//       this.goToOtherPage(page_name, value);
//     },
//   },
};
</script>
  1. 修改 B.vue 文件:

接着我们要怎么接受参数咧？搞了那么久，其实配方都是一样的，要接受参数，我需要想引入useRoute ，注意是没有r结尾的，是不是有种很熟悉的味道同志们=》this.$route.params，接着也要在setup函数里定义route，接着我们就可以以方法的形式返回params，要使用的话this一下就好了，生命周期函数created、mounted里面都可以直接拿到

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<template>
  <div>Page B</div>
</template>
<script>
import { onMounted } from 'vue';
import { useRoute } from "vue-router";
export default {
  setup() {
    const route = useRoute();
    const getParams = () => {
      return route.params;
    };
    // Composition API 生命周期写法
    onMounted(() => {
      console.log("mounted:" + getParams().value);
    });
    return {
      getParams,
    };

  },
  //   created: function () {
  //     console.log(`created:` + JSON.stringify(this.getParams()));
  //   },
  //   mounted: function () {
  //     console.log("mounted:" + this.getParams().value);
  //   },
};
</script>

效果图：

3、在基础页怎么获取router文件夹中index.js里的数据呢？

1. vue3.x 带上数据

在vue2.x时，在new实例时可以顺便把数据带上，之后在created或mounted生命周期里直接this.$router.options就可以找到我们传的数据了

1
2
3
4
5
6
7
8
const myArr = [1, 2, 3]
const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes,
    myArr
})
export default router

那么在vue3.x中，我们可以在创建路由时把数据带上

1
2
3
4
5
6
7
8
const myArr = [1, 2, 3]
const router = createRouter({
    //history模式：createWebHistory , hash模式：createWebHashHistory
    history: createWebHistory(process.env.BASE_URL),
    routes,
    myArr
})
export default router

2. 之后我们在setup() 函数中使用路由时接收并返回对应的数据，之后就可以在created或mounted生命周期中使用了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { onMounted } from 'vue';
import { useRouter } from "vue-router";
export default {
  setup() {
    const router = useRouter();
    console.log(router.options);
    const myArr = () => router.options.myArr;
    onMounted(() => {
      console.log(this.myArr());
    });
    return {
      myArr
    };
  },
//   mounted: function () {
//     console.log(this.myArr());
//   },
};

3. 成功后打印大概是这个样子：

route 路由跳转与方式对比

vue-router实现路由跳转与参数获取：

路由跳转和传参：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
import { defineComponent, onMounted, reactive, readonly, ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';
export default defineComponent({
  name: 'Login',
  setup() {
    const router = useRouter(), route = useRoute();
    const submitForm = () => {
      formRef.value?.validate((valid) => {
        if (valid) {
          login({ strategy: 'local', ...ruleForm })
            .then((res: any) => {
            // 获取参数和路由跳转
              const redirect: string = route.query && route.query.redirect;
              if (redirect) {
                router.replace(redirect);
              } else {
                router.push('/home');
              }
              return true;
            })
            .catch((e) => {
              ...
            });
        } else {
         ...
          return false;
        }
      });
    };
    return { ..., submitForm };
  }
});

路由跳转三种方法的总结：

  1. 第一种

S1: 路由设置方式:

1
2
3
4
5
6
{//`在这里插入代码片`
  path: '/detail/:id',
  name: 'detail',
  meta: { keepAlive: true },
  component: () => import('../pages/detail/index')
}

S2: 路由跳转模式:

1
2
3
4
5
this.$router.push(
  {
    path: `/detail/1`
  }
)

S3: 获取参数方式:

1
let detailId = this.$route.params.id

注意： params 传参相当于是路由的一部分是必须传的东西,经过验证不传页面会跳转到空白页,该方式刷新页面id 不丢失

  1. 第二种

S1: 路由设置方式:

1
2
3
4
5
6
{
  path: '/detail/:id',
  name: 'detail',
  meta: { keepAlive: true },
  component: () => import('../pages/detail/index')
}

S2: 路由跳转模式:

1
2
3
4
5
6
7
8
this.$router.push(
  {
    name: 'Detail',
    params: {
      id
    }
  }
)

S3: 获取参数方式:

1
let detailId = this.$route.params.id

注意：此方式传参 路由设置方式中的 id 可以传也可以不传,不传刷新页面id 会丢失该方式刷新页面id 不丢失

  1. 第三种

S1: 路由设置方式:

1
2
3
4
5
6
{
  path: '/detail',
  name: 'detail',
  meta: { keepAlive: true },
  component: () => import('../pages/detail/index')
}

S2: 路由跳转模式:

1
2
3
4
5
6
7
8
this.$router.push(
  {
    path: 'Detail',
    query: {
      id
    }
  }
)

S3: 获取参数方式:

1
let detailId = this.$route.query.id

注意：此方式传参 路由设置方式中的 id 不能写，因为写了就是router 的一部分，这样就会匹配不到, 此方式刷新页面id 不丢失

http://localhost:8080/#/detail?id=1

总结： params一旦设置在路由，params就是路由的一部分，如果这个路由有params传参，但是在跳转的时候没有传这个参数，会导致跳转失败或者页面会没有内容。

相关链接

  1. 一篇文章带你了解vue路由
  2. vue3.0路由跳转
  3. vue3中怎么使用router路由呢&页面跳转传参怎么搞呢
  4. Vue3使用vue-router如何实现路由跳转与参数获取
=================我是分割线=================

欢迎到公众号来唠嗑: