详解vue-router基本使用

当我们构建一个Vue.js的单页应用时,通常需要对页面进行路由设置,即根据不同的URL地址,展示不同的页面内容,这时候就需要使用Vue官方提供的vue-router插件。

1. 安装vue-router

vue-router是一个独立的插件,需要先行安装。

可以使用npm安装:

npm install vue-router --save

也可以使用yarn安装:

yarn add vue-router

安装完成后,还需要在Vue项目的入口文件中引入vue-router:

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

2. 定义路由

定义路由就是告诉vue-router要在哪些URL下展示哪些组件。这个步骤需要在一个单独的文件中完成,例如routes.js

import Home from './components/Home.vue'
import About from './components/About.vue'

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

这里我们使用了ES6的模块化语法,并定义了两个组件Home.vueAbout.vue,分别表示首页和关于页面。在路由定义中使用path指定URL地址,使用component指定对应的组件。

3. 注册路由

在Vue应用的入口文件中,将路由定义的实例注册到Vue根实例中,并将路由绑定到一个组件容器中,这个容器负责在不同的URL下展示对应的组件。

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

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

在这个例子中,我们使用<router-view>作为组件容器,它根据路由的配置,将显示不同的组件。

4. 跳转链接

在Vue组件中,可以使用<router-link>标签设置跳转链接:

<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>

这里的to属性指定了跳转到哪一个URL。

示例

下面我们通过两个例子,进一步理解vue-router的基本使用。

例子一

我们构建一个简单的博客网站,即在首页列出所有的文章,在文章的链接下面展示正文内容。

我们先建立两个组件,一个是主页面的Home.vue,另一个是文章详情的Post.vue

<!-- Home.vue -->
<template>
  <div>
    <h1>Recent Posts</h1>
    <ul>
      <li v-for="(post, index) in posts" :key="index">
        <router-link :to="{ name: 'post', params: { id: index } }">{{ post.title }}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      posts: [
        { title: 'Post 1', content: 'This is post 1' },
        { title: 'Post 2', content: 'This is post 2' },
        { title: 'Post 3', content: 'This is post 3' }
      ]
    }
  }
}
</script>
<!-- Post.vue -->
<template>
  <div>
    <h1>{{ post.title }}</h1>
    <p>{{ post.content }}</p>
    <router-link to="/">Back</router-link>
  </div>
</template>

<script>
export default {
  computed: {
    post () {
      return this.$route.params.id ? this.$parent.posts[this.$route.params.id] : { title: '', content: '' }
    }
  }
}
</script>

可以看到,在Home.vue中,我们使用了<ul><li>标签列出所有文章标题,并将每一篇文章标题转化为<router-link>标签,这样用户点击标题时,就能跳转到对应的文章详情页面。

Post.vue中,我们使用了this.$route.params获取当前路由中的id参数,从而展示对应的文章内容。同时,还添加了一个返回首页的链接。

最后,我们在路由定义中,添加对应的路由设置:

import Home from './components/Home.vue'
import Post from './components/Post.vue'

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

这里的/post/:id中,冒号表示这是一个动态参数,可以用this.$route.params.id获取。

例子二

我们按照原来的博客网站,进一步增加评论功能,即每篇文章详情页下方展示该篇文章的所有评论。

我们在文章详情的Post.vue组件中,添加评论表单和评论列表:

<!-- Post.vue -->
<template>
  <div>
    <h1>{{ post.title }}</h1>
    <p>{{ post.content }}</p>
    <form @submit.prevent="addComment">
      <h3>Add a Comment</h3>
      <div>
        <label for="username">Username:</label>
        <input type="text" id="username" v-model="comment.username">
      </div>
      <div>
        <label for="comment">Comment:</label>
        <textarea id="comment" v-model="comment.content"></textarea>
      </div>
      <button type="submit">Post Comment</button>
    </form>
    <h2>Comments</h2>
    <ul>
      <li v-for="(comment, index) in post.comments" :key="index">
        <strong>{{ comment.username }}:</strong> {{ comment.content }}
      </li>
    </ul>
    <router-link to="/">Back</router-link>
  </div>
</template>

<script>
export default {
  data () {
    return {
      comment: { username: '', content: '' }
    }
  },
  methods: {
    addComment() {
      this.post.comments.push({
        username: this.comment.username,
        content: this.comment.content
      })
      this.comment.username = ''
      this.comment.content = ''
    }
  },
  computed: {
    post () {
      return this.$route.params.id ? this.$parent.posts[this.$route.params.id] : { title: '', content: '', comments: [] }
    }
  }
}
</script>

可以看到,在Post.vue中,我们在文章正文下方添加了一个评论表单,用户输入用户名和评论内容后,点击按钮即可添加评论。在评论下方,我们使用v-for指令循环展示所有的评论。

最后,我们在路由定义中,再次添加对应的路由设置:

import Home from './components/Home.vue'
import Post from './components/Post.vue'

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

综上所述,以上就是基于Vue.js使用vue-router实现路由设置的完整攻略,我们通过两个示例进一步学习了该插件的基本使用。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:详解vue-router基本使用 - Python技术站

(0)
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • javascript中有趣的反柯里化深入分析

    反柯里化(uncurrying)是一种将柯里化函数转换为普通函数的过程。JavaScript中的对象方法都是柯里化函数,即将this绑定在对象上来返回一个新函数。 反柯里化的主要目的是为了复用函数,在对象层级比较深的地方使用更为方便。 以下是javascript中有趣的反柯理化深入分析的完整攻略: 什么是反柯里化 1.1 柯里化 在JavaScript中,函…

    JavaScript 2023年6月10日
    00
  • ajax.net对数据库的插入实例

    关于”ajax.net对数据库的插入实例”,以下是详细的攻略: 准备工作 在开始编写代码前,我们需要完成以下准备工作: 安装Visual Studio。 配置数据库(SQL Server 或 MySQL)。 创建一个新网站(可以是WebForms项目或MVC项目),并在项目中添加对jQuery、Ajax.NET库的引用。 在准备工作完成后,我们可以开始编写代…

    JavaScript 2023年6月11日
    00
  • Js判断参数(String,Array,Object)是否为undefined或者值为空

    要判断一个变量是否为undefined或者值为空,可以根据变量的类型采用不同的方法进行判断。 判断字符串类型变量是否为空 使用if语句结合||运算符对字符串类型的变量进行判断,示例代码如下: let str = ”; if (!str || str.trim().length === 0) { console.log(‘字符串为空’); } else { …

    JavaScript 2023年6月10日
    00
  • JavaScript格式化json和xml的方法示例

    下面是“JavaScript格式化json和xml的方法示例”的完整攻略: 一、准备工作 在开始编写JavaScript代码之前,我们需要引入两个库: js-beautify.js: 该库用于美化格式化的代码,包括JSON和XML。 xml2json.js: 该库用于将XML数据转换为JSON数据。 你可以通过以下链接获得这两个库的源代码: js-beaut…

    JavaScript 2023年5月19日
    00
  • 深入了解Javascript的事件循环机制

    深入了解JavaScript的事件循环机制 JavaScript 是一门单线程语言,这意味着在 JavaScript 中,代码是按顺序执行的,只有前一个任务执行完成后,才会执行下一个任务。但是 JavaScript 中有许多异步操作,如定时器、事件监听器、网络请求等,这些操作不会阻塞代码的执行,可以同时执行。那么在 JavaScript 中是如何处理异步操作…

    JavaScript 2023年5月28日
    00
  • 浅谈javascript如何获取文件后缀名

    下面是“浅谈JavaScript如何获取文件后缀名”的完整攻略: 1.什么是文件后缀名 文件后缀名是指在文件名的最后一个句点(.)后面的几个字符,用来表示该文件的类型。比如说,图片文件的后缀名通常是“jpg”或“png”,文本文件的后缀名通常是“txt”或“md”,等等。 2.如何获取文件后缀名 在JavaScript中,可以通过字符串的方法来获取文件后缀名…

    JavaScript 2023年5月27日
    00
  • JavaScript+Canvas模拟实现支付宝画年兔游戏

    概述 支付宝画年兔游戏是一款通过移动画笔,在画板上完成兔子图案的互动游戏。该游戏采用JavaScript+Canvas技术,将用户操作实时绘制在canvas画布上,使用户能够实现交互式的绘图体验。本文将详细介绍如何使用JavaScript+Canvas技术实现支付宝画年兔游戏。 准备工作 在开始实现支付宝画年兔游戏之前,需要做以下的准备工作: 确定绘图工具和…

    JavaScript 2023年6月11日
    00
  • fastclick插件导致日期(input[type=”date”])控件无法被触发该如何解决

    首先,需要梳理一下问题的背景和现象: 背景:当网页中使用了fastclick插件时 现象:用户在点击日期选择控件时,控件无法弹出日期选择框,无法选择日期。 这是因为fastclick插件会阻止浏览器默认的双击事件(有些日期选择控件在点击两次时才能弹出)和移动端的300ms延迟,从而提升点击体验。然而这个插件的实现方式是,将点击事件改为tap事件,从而可能会对…

    JavaScript 2023年6月11日
    00
合作推广
合作推广
分享本页
返回顶部