Create routing

As an important part of the entry of the project, we can start by designing the route to build the project.

Chapter Content:

  1. Creating a Routing File
  2. Initializing a Route

Creating a Routing File

Create router and views directories under SRC. The latest SRC directory structure is as follows:

- src
	- assets		// Resources folder
	- components 	/ / component
	- router		// Route configuration
	- views			// Page component
	- App.vue
	- main.js
Copy the code

Create the required files in the SRC /router directory:

- src/router
	- index.js
	- router.config.js
Copy the code

Create the required files in the SRC /views directory. Let’s first design a home page and a login page:

- src/views
	- index.vue
	- login.vue
Copy the code

Initializing a Route

Note: this tutorial is designed from the beginning, so complex business factors such as permission control, policy matching, etc. are not considered in the early design, which will be gradually supplemented later.

Install the routing plug-in.

npm install vue-router@next
Copy the code

Add a route configuration.

src/router/router.config.js

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

export const routes = [

    / / home page
    {
        path: "/".name: "index".component: Index,
        meta: {}}, {path: "/login".name: "login".component: () = > import(".. /views/Login.vue")}]Copy the code

src/router/index.js

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

const router = createRouter({
    // Use the history route, or createWebHashHistory if a hash route is required
    history: createWebHistory(), 
    routes
});

export default router;
Copy the code

Delete helloword. vue under SRC /components and clean up app. vue. Delete all code from the initialization template and replace it with the following: router-view is the placeholder for the route matching to the component.

src/App.vue

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

<script>
export default {
    name: "App".components: {}};</script>
Copy the code

Configure a mount route for the APP object.

src/main.js

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

// Import the routing object
import router from "./router/index"

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

/ / create the app
const app = createApp(App);
app.use(router);
app.mount("#app");
Copy the code

Finally, add some simple content to the page component to test.

src/views/index.vue

<template>
  <div>Home page - by CTcode</div>
</template>

<script>
export default {}
</script>
Copy the code

src/views/login.vue

<template>
  <div>Login page -by CTcode</div>
</template>

<script>
export default {}
</script>
Copy the code

Now open the page to access the http://localhost:3000 and http://localhost:3000/login, see have not corresponding to the contents of the ~!

The pages covered in this section are as follows:

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

View the code:

Git clone (downloaded direct checkout https://github.com/chitucode/ctcode-vue3.git git checkout v2.0Copy the code

Wechat account of friends

Add big brother wechat and thousands of peers to enhance technical communication life

hsian_

The last

The code word is not easy and your clicks and likes and comments are my best motivation