The steps to install Vue Router are as follows: 1. Confirm that the project is created based on Vue 3 and view the vue version in package.json; 2. Run npm install vue-router@4 or yarn add vue-router@4 in the terminal to install dependencies; 3. Create router.js file and configure the routing table, and initialize the routing instance using createRouter and createWebHistory; 4. Introduce and mount the routing instance in main.js to the application; 5. Note that the page must include , use for navigation, and configure the server to support history mode during deployment.

Installing Vue Router is actually not complicated, but for beginners, it is easy to make mistakes in details. Below we will explain how to correctly install and configure Vue Router, which is suitable for Vue 3 projects (if it is Vue 2, the steps are slightly different).

Confirm whether the project environment meets the requirements

Before you start, make sure that your project is created based on Vue 3 and uses a version that supports Vue Router. If you are using a project created by Vite or Vue CLI, there is basically no problem.

• Node.js and npm (or yarn, pnpm) are already installed
• Recommended Vue 3 Vue Router 4 combination

If you are not sure about the current project version, you can view the version number of "vue" in package.json .

Install the Vue Router package

Open the terminal, go to the root directory of your project, and run the installation command:

• If you use npm:

   npm install vue-router@4

• If you use yarn:

   yarn add vue-router@4

After this step is completed, Vue Router is added to the project dependency. You can check if there is vue-router in the node_modules folder, or see if this item has been added dependencies in package.json .

Create and configure routing files

Next, you need to create a file that specifically manages routes, usually called router.js or router/index.js .

The content is roughly as follows:

 import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

Here are a few key points to note:

• Routing components are usually placed in the views folder, not components
• Each routing object must have path and component
• Use createWebHistory() to enable HTML5 history mode, and URLs are more friendly

Introduce and mount routes in main.js

The last step is to mount the route instance you just created into the Vue application.

If you initialize the application through createApp , you can write it like this:

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

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

Note .use(router) here, which is the standard usage of Vue plug-in. Without this step, the page cannot recognize <router-view></router-view> and <router-link></router-link> .

Frequently Asked Question Tips

• Page blank? Check if <router-view></router-view> is missing, it is where the routing components are displayed
• No response to the link jump? Confirm whether you use the ordinary <a></a> tag, you should use <router-link to="/">首頁</router-link>
• Can the development environment run, after deployment 404? It may be that the server does not have the support for history mode, and redirection rules need to be set on nginx or other servers.

Basically, these steps are not complicated, but every step cannot be missed.

The above is the detailed content of How to install vue router?. For more information, please follow other related articles on the PHP Chinese website!