VUE3 项目开发实战入门系列 （2.-创建路由）

创建路由

​ 路由作为项目的入口重要的部分，我们可以从设计路由开始搭建项目。

章节内容：

1. 新建路由文件
2. 初始化路由

新建路由文件

​ 在src目录下创建router和views目录，最新src目录结构如下：

- src
	- assets		// 资源文件夹
	- components 	// 组件
	- router		// 路由配置
	- views			// 页面组件
	- App.vue
	- main.js

​ 在src/router目录下创建所需的文件:

- src/router
	- index.js
	- router.config.js

​ 在src/views目录下创建所需的文件，下面我们先来设计一个首页和登录页：

- src/views
	- index.vue
	- login.vue

初始化路由

注意：本教程思路是由浅入深，所以在前期的设计里先不考虑复杂的业务因素，比如权限控制，策略匹配等等，在后面内容会逐渐补充。

安装路由插件。

npm install vue-router@next

添加路由配置。

src/router/router.config.js

import Index from "../views/index.vue";

export const routes = [

    // 首页
    {
        path: "/",
        name: "index",
        component: Index,
        meta: {}
    },
    {
        path: "/login",
        name: "login",
        component: () => import("../views/Login.vue")
    }
]

src/router/index.js

import { createRouter, createWebHistory } from "vue-router"
import { routes } from "./router.config"

const router = createRouter({
    // 使用history路由, 如果需要hash路由则使用createWebHashHistory
    history: createWebHistory(), 
    routes
});

export default router;

接下来删除src/components下的HelloWord.vue，同时清理App.vue，删除初始化模板的所有代码，替换内容如下，router-view是路由匹配到组件的占位符。

src/App.vue

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

<script>
export default {
    name: "App",
    components: {},
};
</script>

给app对象配置挂载路由。

src/main.js

import { createApp } from 'vue'
import App from './App.vue'

// 导入路由对象
import router from "./router/index"

// createApp(App).mount('#app')

// 创建app
const app = createApp(App);
app.use(router);
app.mount("#app");

最后给页面组件添加一些简单的内容来进行测试。

src/views/index.vue

<template>
  <div>首页 - by ctcode</div>
</template>

<script>
export default {}
</script>

src/views/login.vue

<template>
  <div>登录页 - by ctcode</div>
</template>

<script>
export default {}
</script>

现打开页面去访问下 http://localhost:3000 和 http://localhost:3000/login， 看下有没对应的内容了~！

本小节涉及的页面如下：

src/router/router.config.js src/router/index.js src/App.vue src/main.js src/views/index.vue src/views/login.vue

查看代码：

git clone https://github.com/chitucode/ctcode-vue3.git (已下载可直接checkout)
git checkout v2.0 

好友微信号

添加大佬微信 和上千同伴一起提升技术交流生活

hsian_

最后

码字不容易 你的点击关注点赞留言就是我最好的驱动力