vue router installation tutorial

Vue is a popular front-end development framework, and Vue Router is a part of Vue that is used to manage routing in Vue applications. Vue Router enables you to control browser URLs and content displayed in your application. It provides a rich interactive experience and page navigation capabilities for Vue applications. In this article, we will explain how to install and use Vue Router.

1. Create a Vue project

First, you need to install the Vue CLI and create a new Vue project. Enter the following command at the command line:

npm install -g @vue/cli
vue create my-project

The above command will install the Vue CLI and use it to create a Vue project named "my-project". Go into your new project and enter the following command at the command line to start the application:

cd my-project
npm run serve

2. Install Vue Router

Next, we need to install Vue Router. Enter the following command at the command line to install Vue Router:

npm install vue-router --save

The above command will install Vue Router via npm and add it to your project dependencies.

3. Creating Routes

Next, we will create some routing and view components. Create a file named "router.js" in the SRC directory. In this file, we will create a new Vue Router instance and export it. Here is a simple example:

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    }
  ]
})

The above code creates a route named "home" that points to a component named "Home". To use Vue Router, you need to import the route in your application's entry point. Open the "main.js" file and add the following code:

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

The above code enables routing by importing the "router.js" file and including it in the root Vue instance.

4. Create view components

Next, we need to create some view components to display different routes. Create a file called "Home.vue" in the "src/views" folder. In this file, add the following code:

<template>
  <div>
    <h1>Welcome to the Home Page!</h1>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

The above code defines a simple "Home" component that has only a title and no interaction or navigation. You can add more components and create different routes for them.

5. Add Navigation

To allow users to navigate to different routes and components, we need to add some navigation elements to the application. Add the following code in the "App.vue" file:

<template>
  <div id="nav">
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
  </div>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

The above code adds two link elements, one pointing to the "Home" route and the other pointing to the "About" route. It also contains the <router-view> element, which will display different components based on the current URL.

6. Run the Application

Now you can run the application to see if your routing is working properly. Enter the following command at the command line:

npm run serve

This will launch your application in the browser. You can use navigation elements to navigate to different routes and components and see how the URL reflects the current navigation state.

Conclusion

Vue Router is a very useful tool that can help you build interactive Vue applications with complex navigation. To use Vue Router, you need to add the component to your application and set up routing and navigation. I hope this article was helpful and I wish you happy Vue development!

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