学习使用路由Vue-Router

简言

终于要使用vue-router啦，总在一个页面编写内容已经写腻了。这篇文章是使用vue-router的入门篇，简单将一下用途和使用方法。先甩官方文档Vue-Router。

话不多说,不玩虚的，let’s go！ ——ZSK666

正文

用途

我们都知道使用vue框架基本是用来做单页应用的（single page web application，SPA），单页应用就是这样，利用路由来实现和多页应用相似的页面跳转效果。当然你也可以自己搞，如果觉得自己搞的不好、不全面、兼容性不高的话，就使用现有相对完善的路由工具。
vue推荐的是vue-router。Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。功能包括：

• 嵌套路由映射
• 动态路由选择
• 模块化、基于组件的路由配置
• 路由参数、查询、通配符
• 展示由 Vue.js 的过渡系统提供的过渡效果
• 细致的导航控制
• 自动激活 CSS 类的链接
• HTML5 history 模式或 hash 模式
• 可定制的滚动行为
• URL 的正确编码

安装配置

安装

我是用npm 安装

npm install vue-router@4

配置

先在pages创建路由文件夹router,然后引入vue-router创建路由实例。

我使用了ts,文件如下：

/*
 * @Date: 2022-11-15 15:13:50
 * @LastEditors: zhangsk
 * @LastEditTime: 2022-11-15 15:27:08
 * @FilePath: \basic-demo\src\router\index.ts
 * @Label: Do not edit
 */
import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'
import type { RouteRecordRaw } from 'vue-router'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    component: () => import('../pages/index.vue')
  }
]

const router = createRouter({
  history: createWebHistory(),  //  使用类似h5的路由，有两种模式，h5路由：createWebHistory， hash路由：createWebHashHistory
  routes,
})

export default router

然后在vue实例中（默认是pages下的main.ts）使用router的实例：

/*
 * @Date: 2022-10-27 11:31:17
 * @LastEditors: zhangsk
 * @LastEditTime: 2022-11-15 15:26:13
 * @FilePath: \basic-demo\src\main.ts
 * @Label: Do not edit
 */
import { createApp } from 'vue'
import App from './App.vue'
//  router
import router from './router/index'

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

在App.vue中使用router-view渲染内容。

<!--
 * @Date: 2022-10-27 11:31:17
 * @LastEditors: zhangsk
 * @LastEditTime: 2022-11-15 15:45:41
 * @FilePath: \basic-demo\src\App.vue
 * @Label: Do not edit
-->
<script setup lang="ts"></script>

<template>
  <div id="App">
    <router-view />
  </div>
</template>

<style scoped></style>

大功告成！！！后面只专注router下index.ts文件中的routes配置就行。

基础使用

在说使用之前我们先了解几个基本的属性：

• router-link：我们没有使用常规的 a 标签，而是使用一个自定义组件 router-link 来创建链接。这使得 Vue Router 可以在不重新加载页面的情况下更改 URL，处理 URL 的生成以及编码。
• router-view：router-view 将显示与 url 对应的组件。你可以把它放在任何地方，以适应你的布局。
• useRoute：返回当前路由地址。相当于在模板中使用 $route。必须在 setup() 中调用。可以查看当前页面的一些信息。
• useRouter：返回 router 实例。相当于在模板中使用 $router。必须在 setup() 中调用。可以使用一些方法改变路由，利如使用push(path)跳转到指定路由。

上面的是在项目中经常用到的属性，等下展示使用示例，在这之前我们先了解怎么添加路由。
添加一个新的路由是在路由实例那的routes对象：

routes是一个数组，数组的每一项都是一个路由对象，路由对象有以下属性：

• path（必需） -路由路径 ，大部分写成字符串的形式，也有高级用法路由高级匹配，但一般都是静态路由，具体需求具体分析。
• component（必需） - 要渲染的组件，这个和导入组件用法一样，可以对象形式，也接受返回Promise对象的函数形式。
• name - 路由名字，建议要写，因为在传递params参数时会用到。
• redirect - 重定向，顾名思义，就是重定向到指定路由。例：{path:‘/’,redirect:‘/index’}，将/重定向到/index。
• alias - 别名。给path起别名，例如：{path:‘/’,alias:‘/home’}，将/别名为/home，访问/home时就会显示/ 的渲染组件。
• children - 嵌套路由。使用children可以写二级路由，是个子路由对象数组，每一项都是路由对象(注意子路由path不要带/ )。访问时需要加上路由的path访问，例：如果一级路由path为/index，某个子路由path为detail，则需要/index/detail访问。
  routes示例：

/*
 * @Date: 2022-11-15 15:13:50
 * @LastEditors: zhangsk
 * @LastEditTime: 2022-11-15 16:42:39
 * @FilePath: \basic-demo\src\router\index.ts
 * @Label: Do not edit
 */
import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'
import type { RouteRecordRaw } from 'vue-router'

//  页面组件
import Index from '@/pages/index.vue'
import Detail from '@/pages/detail.vue'
import Login from '@/pages/login/index.vue'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    component: Login
  },
  {
    path: '/one',
    name: 'one',
    component: Index
  },
  {
    path: '/two',
    redirect: '/one', //  重定向到 /one
    component: () => import('../pages/one.vue'),
    children: [
      {
        path: 'detail', //  /two/detail
        component: Detail,
      }
    ]
  },
  {
    path: '/three',
    alias: '/ones', //  访问 /ones和 /three效果一样
    component: () => import('../pages/one.vue'),
    children: [
      {
        path: 'detail',
        component: Detail,
      }
    ]
  },
]

const router = createRouter({
  history: createWebHistory(),  //  使用类似h5的路由，有两种模式，h5路由：createWebHistory， hash路由：createWebHashHistory
  routes,
})

export default router

使用：

<!--
 * @Date: 2022-11-15 16:40:43
 * @LastEditors: zhangsk
 * @LastEditTime: 2022-11-15 16:47:42
 * @FilePath: \basic-demo\src\pages\login\index.vue
 * @Label: Do not edit
-->
<template>
  <div class="container">
    <router-link to="one">One</router-link>
    <button @click="detail">跳转详情</button>
  </div>
</template>
<script lang="ts" setup>
import { reactive, toRefs, onBeforeMount, onMounted } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const detail = () => {
  router.push({
    path: "/two/detail",
  });
};
</script>
<style lang="scss" scoped></style>

效果：

点击one

点击跳转详情

结语

结束了。讲了vue-router基本使用，除了这些外，常使用的还有路由守卫，路由传参（query和params）,路由切换过渡效果和动态添加路由等，这里不再介绍，想了解请到官网。