search
HomeWeb Front-endVue.jsThe use of Vue-router in projects and its precautions

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 id="欢迎来到电影在线观看网站">欢迎来到电影在线观看网站</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 id="电影详情页">电影详情页</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!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
如何在Go中使用命名管道?如何在Go中使用命名管道?May 11, 2023 pm 04:22 PM

命名管道是一种在操作系统中相对比较低级的进程通信方式,它是一种以文件为中介的进程通信方式。在Go语言中,通过os包提供了对命名管道的支持。在本文中,我们将介绍如何在Go中使用命名管道来实现进程间通信。一、命名管道的概念命名管道是一种特殊的文件,可以被多个进程同时访问。在Linux系统中,命名管道是一种特殊的文件类型,它们存在于文件系统的某个位置上,并且可以在

如何在Go中使用第三方库?如何在Go中使用第三方库?May 11, 2023 pm 03:30 PM

在Go语言中,使用第三方库是非常方便的。许多优秀的第三方库和框架可以帮助我们快速地开发应用程序,同时也减少了我们自己编写代码的工作量。但是如何正确地使用第三方库,确保其稳定性和可靠性,是我们必须了解的一个问题。本文将从以下几个方面介绍如何使用第三方库,并结合具体例子进行讲解。一、第三方库的获取Go语言中获取第三方库有以下两种方式:1.使用goget命令首先

如何在PHP中使用协程?如何在PHP中使用协程?May 12, 2023 am 08:10 AM

随着传统的多线程模型在高并发场景下的性能瓶颈,协程成为了PHP编程领域的热门话题。协程是一种轻量级的线程,能够在单线程中实现多任务的并发执行。在PHP的语言生态中,协程得到了广泛的应用,比如Swoole、Workerman等框架就提供了对协程的支持。那么,如何在PHP中使用协程呢?本文将介绍一些基本的使用方法以及常见的注意事项,帮助读者了解协程的运作原理,以

如何在PHP中使用变量函数如何在PHP中使用变量函数May 18, 2023 pm 03:52 PM

变量函数是指可以使用变量来调用函数的一种特殊语法。在PHP中,变量函数是非常有用的,因为它可以让我们更加灵活地使用函数。在本文中,我们将介绍如何在PHP中使用变量函数。定义变量函数在PHP中,变量函数的定义方式非常简单,只需要将要调用的函数名赋值给一个变量即可。例如,下面的代码定义了一个变量函数:$func='var_dump';这里将var_dump函

如何在Go中使用WebSocket?如何在Go中使用WebSocket?May 11, 2023 pm 04:17 PM

近年来,WebSocket技术已经成为了Web开发中不可或缺的一部分。WebSocket是一种在单个TCP连接上进行全双工通信的协议,它使得客户端和服务器之间的通信更加流畅和高效。如今,很多现代的Web应用程序都使用了WebSocket技术,例如实时聊天、在线游戏以及实时数据可视化等。Go语言作为一个现代的编程语言,自然也提供了很好的支持WebSock

如何在 Windows 11 中按需使用 OneDrive 的文件如何在 Windows 11 中按需使用 OneDrive 的文件Apr 14, 2023 pm 12:34 PM

&lt;p&gt;Windows 系统上的 OneDrive 应用程序允许您将文件存储在高达 5 GB 的云上。OneDrive 应用程序中还有另一个功能,它允许用户选择一个选项,是将文件保留在系统空间上还是在线提供,而不占用您的系统存储空间。此功能称为按需文件。在这篇文章中,我们进一步探索了此功能,并解释了有关如何在 Windows 11 电脑上的 OneDrive 中按需使用文件的各种选项。&lt;/p&gt;&lt;h2&gt;如何使用 On

如何在Go中使用音频处理?如何在Go中使用音频处理?May 11, 2023 pm 04:37 PM

随着音频处理在各种应用场景中的普及,越来越多的程序员开始使用Go编写音频处理程序。Go语言作为一种现代化的编程语言,具有优秀的并发性和高效率的特点,使用它进行音频处理十分方便。本文将介绍如何在Go中使用音频处理技术,包括读取、写入、处理和分析音频数据等方面的内容。一、读取音频数据在Go中读取音频数据有多种方式。其中比较常用的是使用第三方库进行读取,比如go-

如何在PHP中使用数据聚合函数如何在PHP中使用数据聚合函数May 18, 2023 pm 02:51 PM

数据聚合函数是一种用于处理数据库表中多行数据的函数。在PHP中使用数据聚合函数可以使得我们方便地进行数据分析和处理,例如求和、平均数、最大值、最小值等。下面将介绍如何在PHP中使用数据聚合函数。一、介绍常用的数据聚合函数COUNT():计算某一列的行数。SUM():计算某一列的总和。AVG():计算某一列的平均值。MAX():取出某一列的最大值。MIN():

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
1 months agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

SublimeText3 Linux new version

SublimeText3 Linux new version

SublimeText3 Linux latest version

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)