vue-router路由文档详解

介绍

Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。功能包括：

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

一、安装

直接下载 / CDN

https://unpkg.com/vue-router@4

npm安装

npm install vue-router@4

开发版本构建

如果你想使用最新的开发版本，你需要直接从 GitHub 上克隆并自己构建 vue-router。

git clone https://github.com/vuejs/vue-router.git node_modules/vue-router
cd node_modules/vue-router
npm install
npm run build

二、使用方法

新建router模块

在src目录下创建一个router目录，里面再创建一个index.js/index.ts文件，这个目录就是router模块

import { createRouter, createWebHashHistory } from "vue-router";
const routers = [
    {
        path: '/',
        component: () => import('../views/Index/Index.vue')
    },
    {
        path: '/login',
        component: () => import('../views/Login/Login.vue')
    }
]

export const router = createRouter({
    history: createWebHashHistory(),
    routes: routers
})

export default router

挂载路由

在main.js/main.ts文件添加router

import { createApp } from 'vue';
import App from './App.vue';
import router from './router/index'

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

然后在App.vue文件中使用router-view将组件或页面渲染到这里

<template>
  <router-view></router-view>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component';

@Options({
  components: { 
  },
})
export default class App extends Vue {}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

最后在用到路由的组件通过router-view组件或者router-link跳转

<script lang="ts">

</script>
<template>
    <van-button type="primary">首页</van-button>
    <router-link to="/login">
        <van-button type="success">登录</van-button>
    </router-link>
</template>

使用@别名作为根目录

在vite.config.ts文件中引入path并配置

import { resolve } from 'path';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import styleImport, { VantResolve } from 'vite-plugin-style-import';

// https://vitejs.dev/config/
const root = process.cwd()
function pathResolve(dir: string) {
  return resolve(root, '.', dir);
}
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    styleImport({
      resolves: [VantResolve()],
    }),
  ],
  resolve: {
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.less', '.css'],
    alias: [
      {
        find: /\@\//,
        replacement: `${pathResolve('src')}/`
      }
    ]
  },
  server: {
    // host: '192.168.0.221',
  }
})

然后就可以在相应的地方使用啦,如：router配置文件中

import { createRouter, createWebHashHistory } from "vue-router";
const routers = [
    {
        path: '/',
        component: () => import('@/views/Index/Index.vue')
    },
    {
        path: '/login',
        component: () => import('@/views/Login/Login.vue')
    },
    {
        path: '/users/:id',
        component: () => import('@/views/Users/Users.vue')
    }
]

export const router = createRouter({
    history: createWebHashHistory(),
    routes: routers
})

export default router

动态路由匹配

const routers = [
    {
        // 动态字段以冒号开始
        path: '/users/:id',
        component: () => import('../views/Users/Users.vue')
    },
]

<template>
  <h3>User ID :{{$route.params.id}}</h3>
</template>

<script>
export default {
  name: "Users"
}
</script>

<style scoped>

</style>