vue-router的使用

1.打开router.js(vue3)，或router文件夹下的index.js(vue2)

import Vue from 'vue'
import Router from 'vue-router'
// @是src目录
import Home from '@/pages/home/Home'
import City from '@/pages/city/City'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/city',
      name: 'City',
      component: City
    }
  ]
})

2.在对应的引入路径下创建文件

3.页面跳转，找到对应的按钮，添加代码（在标签中使用）

<router-link to="/city">
  <button class="item-button">
    查看详情
  </button>
</router-link>

 4.在js函数中使用

handleClick (city) {
      this.$store.dispatch('changeCity', city)
      this.$router.push('/')
      // push里放路径
    }