The use of Vue-router in projects and its precautions

The use of Vue-router in the project and its precautions

Vue-router is the official routing manager of Vue.js, used to build single-page applications ( Single Page Application). It manages URLs and realizes refresh-free jumps between pages, helping us build more flexible and interactive front-end applications.

1. Use Vue-router

1. Install Vue-router

In the root directory of the project, use the npm command to install:

npm install vue-router

2. Configure routing

Introduce Vue-router and related components into the entry file of the project (such as main.js):

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

Vue.use(VueRouter)

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

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

In the above code, we configure two routes: home and about, the corresponding components are Home and About.

3. Configure routing exit

In the root component of the project (such as App.vue), add the tag for rendering different routing components:

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

2. Usage Example

Below we will combine a simple case to demonstrate how to use Vue-router.

Take a website for watching movies online as an example. We need to implement two pages: the homepage and the movie details page.

1. Create the homepage component

Create the Home.vue file in the src/views directory and add the following code:

<template>
  <div class="home">
    <h1>欢迎来到电影在线观看网站</h1>
    <button @click="goToDetail">查看电影详情</button>
  </div>
</template>

<script>
export default {
  methods: {
    goToDetail() {
      this.$router.push('/detail')
    }
  }
}
</script>

2. Create the movie details page component

Create the Detail.vue file in the src/views directory and add the following code:

<template>
  <div class="detail">
    <h1>电影详情页</h1>
    <p>电影名称：{{ movie.name }}</p>
    <p>导演：{{ movie.director }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      movie: {
        name: '复仇者联盟',
        director: '乔·罗素'
      }
    }
  }
}
</script>

3. Configure routing

In main.js, introduce and configure the home and detail components Routing:

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './views/Home.vue'
import Detail from './views/Detail.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/detail',
    name: 'detail',
    component: Detail
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

4. Run the project

Execute the npm run serve command in the command line to start the project, and then visit http://localhost:8080 in the browser to see the homepage .

Click the "View Movie Details" button to jump to the movie details page and display the movie's name and director.

3. Notes

1. Use history mode

When creating a VueRouter instance, set the mode to history mode. You can remove the # symbol in the URL to make the URL More beautiful.

const router = new VueRouter({
  mode: 'history',
  routes
})

2. Dynamic routing

Vue-router allows the use of dynamic routing to achieve more flexible page jumps. For example, you can pass the ID of a movie through a routing parameter to render detailed information about the corresponding movie in the movie details page.

// 路由配置
const routes = [
  {
    path: '/detail/:id',
    name: 'detail',
    component: Detail
  }
]

// 传递参数
this.$router.push('/detail/123')

// 获取参数
this.$route.params.id

3. Nested routing

Vue-router supports nested routing, which can load another component inside a component to achieve a more complex page structure. For example, you can load the review component in the movie details page.

// 路由配置
const routes = [
  {
    path: '/detail/:id',
    name: 'detail',
    component: Detail,
    children: [
      {
        path: 'comment',
        component: Comment
      }
    ]
  }
]

The above is the use of Vue-router in the project and its precautions. By configuring routes and components, we can achieve refresh-free jumps between pages and improve user experience. At the same time, Vue-router also supports dynamic routing and nested routing, allowing us to build richer and more complex front-end applications. I hope this article will help you understand and use Vue-router!

The above is the detailed content of The use of Vue-router in projects and its precautions. For more information, please follow other related articles on the PHP Chinese website!