详解vue-router基本使用-前端开发

当我们构建一个Vue.js的单页应用时，通常需要对页面进行路由设置，即根据不同的URL地址，展示不同的页面内容，这时候就需要使用Vue官方提供的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.vue和About.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
    }
  ]
})