详解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日

相关文章

  • node puppeteer(headless chrome)实现网站登录

    下面我将介绍如何使用Node.js中的Puppeteer库实现网站登录的完整攻略。在此过程中,我将提供两个示例以帮助您更好地理解。 简介 Puppeteer是由Google开发的一个Node.js库,它提供了一组API来使用Headless Chrome浏览器进行自动化测试、爬虫或屏幕截图等操作。Headless Chrome是Chrome浏览器的无界面版本…

    JavaScript 2023年6月11日
    00
  • JavaScript 开发规范要求(图文并茂)

    JavaScript开发规范要求(图文并茂) 简介 JavaScript是一门非常灵活的语言,灵活性也为其带来了使用难度,所以为了保证代码的品质和可维护性,一些好的JavaScript开发规范是必不可少的。 为此,本文将详细介绍旨在提高JavaScript代码品质和可维护性的开发规范要求。 代码组织 引入顺序 首先,我们应该根据引入类型将脚本分成3个部分: …

    JavaScript 2023年5月27日
    00
  • Javascript基础回顾之(一) 类型

    Javascript基础回顾之(一) 类型 在 Javascript 中,数据类型是对值的分类。值可以是基本类型或对象类型。本文将重点回顾以下六种基本类型: Undefined Null Boolean Number String Symbol Undefined 当声明一个变量但不对它进行初始化时,它的值就为 undefined。例如: let a; co…

    JavaScript 2023年5月18日
    00
  • 原生js实现倒计时功能(多种格式调用)

    下面是关于原生JavaScript实现倒计时功能的攻略,包含了多种格式的调用方式: 前置知识 在学习原生JavaScript实现倒计时功能前,需要掌握HTML、CSS、和基本的JavaScript语法知识。 原生JavaScript实现倒计时功能 HTML 首先,我们需要在HTML文件中创建一个具有倒计时功能的元素,例如一个 div 元素: <div …

    JavaScript 2023年5月27日
    00
  • 关于取不到由location.href提交而来的上级页面地址的解决办法

    在 JavaScript 代码中,可以使用 document.referrer 获取到引用当前页面的上级页面的地址,但是无法获取由 location.href 提交而来的上级页面的地址。在这种情况下,需要通过其他方式解决。 一种可行的解决方法是在跳转链接的时候,将上级页面的地址作为参数传递到跳转的页面中。具体实现步骤如下: 在跳转链接中添加参数 <a …

    JavaScript 2023年6月11日
    00
  • javascript表单控件实例讲解

    JavaScript表单控件实例讲解 JavaScript是一种脚本语言,经常用于网页中对用户输入信息的校验和处理。表单是用户和服务器之间交换数据的最主要方式之一,JavaScript正是被广泛用于表单交互的。 表单控件分类 表单控件通常分为以下几类: 文本类控件:包括文本框、密码框、文本域等; 选择类控件:包括单选框、复选框、下拉框等; 文件上传类控件:用…

    JavaScript 2023年5月28日
    00
  • 推荐自用 Javascript 缩图函数 (onDOMLoaded)……

    推荐自用 Javascript 缩图函数 (onDOMLoaded) 完整攻略 简介 本文介绍如何使用自制的Javascript缩图函数,在网页加载完成时动态生成缩略图并缓存到浏览器。这个缩图函数可以实现对任何图片的缩放和加载加速,用户能够更快地预览高清图片,同时亦可以节省流量和加载时间。 准备工作 在开始之前,您需要了解一些前置知识: HTML, CSS和…

    JavaScript 2023年6月10日
    00
  • javascript实现可键盘控制的抽奖系统

    需要实现一个可键盘控制的抽奖系统,我们可以采用JavaScript语言编写代码。下面,我将详细介绍实现步骤: 步骤一:创建HTML页面 首先,我们需要在HTML页面中创建一个大转盘和一个按键,用户可以通过这个按钮来控制转盘的停止。 <!DOCTYPE html> <html> <head> <meta charset…

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