配置 vue3 路由

上篇介绍了如何创建 vue3 项目 还没搭建项目可以先搭建 vue3 项目搭建

vue3 路由如何配置

  1. 安装(选择你的包管理工具即可)

    npm install vue-router@next
    yarn add vue-router@next

  2. 到项目目录 src 下

    • 新建 router 文件夹
    • 新建 index.js 文件

  3. 在 indes.js 下引入 vue-router

    • 这里的 createWebHashHistory 是我使用的路由方式 它会在路由后面加 # 号
    • 如果后端配合你也可以选择 createWebHistory 它将直接使用 /path 的方式跳转路由 好看点没其他了
1
2
import { createRouter, createWebHashHistory , createWebHistory } from "vue-router";

  1. 创建当前路由组 并导出
  • 这个和 vue2 一致 没学过 vue2 就直接复制即可
  • 注意这时候你 src 下没有 views 文件夹 Home.vue 和 table.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
import Home from "../views/Home.vue";

const routes = [
    {
        path: "/",
        name: "Home",
        component: Home,
    },
    {
        path: "/table",
        name: "table",
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () =>
            import(/* webpackChunkName: "table" */ "../views/table.vue"),
    },
];
const router = createRouter({
    history: createWebHashHistory(),
    routes,
});

export default router;
  1. src 下 main.js 引入路由
    • 这时 完整的 main.js 是这样的
1
2
3
4
5
6
7
8
import { createApp } from 'vue'
import router from './router/index'
import App from './App.vue';

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

  1. 修改 src 下 App.vue
  • 修改 template 部分为一下代码即可
    1
    2
    3
    4
    5
    6
    7
    8
    <div>
    		<div id="nav">
    			<router-link to="/">Home</router-link> |
    			<router-link to="/table">table</router-link>
    		</div>
    		<router-view />
    	</div>

  1. 根据你自己的包管理器 运行一下
  • yarn dev
  • npm run dev

好了完成啦 点击 Home 和 table 就可以看到已经跳转了