Vue-router的使用之入门

代码环境：vue-cli@4， vue@2，vue-router@3

---

前言

在用vue创建单页面应用时，一般会用到vue-router来进行页面跳转，作为vue全家桶之一，很有必要学习一下如何使用。以下记录学习过程的笔记。

---

一、安装vue-touter

vue@2.x 下载vue-router@3.x，vue@3.x下载vue-router@4.x，这里使用的时vue@2，所以下载的是cue-router@3

npm install vue-router@3 --save

二、vue-router 组件

vue-router 提供了两个组件

• <router-link/>： 默认会被渲染成一个 <a> 标签 ，可以通过配置 tag 属性生成别的标签，通过传入 to 属性指定链接。
• <router-view>：用来渲染路由匹配的组件

三、引入使用

1. main.js 引入

router 相关代码实际情况中会抽离单独模块进行配置，在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 = [
  {
    name: 'home',
    path: '/home',
    component: Home
  },
  {
    name: 'about',
    path: '/about',
    component: About
  }    
]
const router = new VueRouter({
  routes:routes
})

new Vue({
  router, // vue 会把router注册所有的组件，任何组件都可以访问this.$router, this.$route
  store,
  render: (h) => h(App),
}).$mount('#app')

3. 在App.vue

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view />
  </div>
</template>

通过上述的配置，可以点击Home和About来切换页面显示的内容

4. 在页面上用js实现路由跳转

vue-router实例提供了几种跳转方法，常用的有routr.push(),router.replace(),router.go()
api文档

<template>
  <div>
    <div>Home Page</div>
    <button @click="onClick">to about page<button>
  </div>
</template>

 - [ ] List item

export default {
  name: 'home',
  methods: {
    onClick: function Onclick () {
      // 接收字符串进行path匹配
      // this.$router.push('/about') 
      // push 方法也接收一个描述目标位置的对象
      this.$router.push({name: 'about', params: {name: 'jack'}})
    }
  }
}

总结

vue-router入门使用配置还是上手比较容易的，以此记录一下…