vue-routerの使用

1866 ワード

1.routerを開きます.js(vue 3)、または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.ページのジャンプ、対応するボタンを見つけ、コードを追加(ラベルで使用)

  
 4.js関数での使用
handleClick (city) {
      this.$store.dispatch('changeCity', city)
      this.$router.push('/')
      // push    
    }