router

vue-router
インストール
方法1:vue-cliで、プロジェクト作成時にrouterをチェックします.
方法2:コマンドラインでインストールし、自分で構成する

npm i vue-router -S

配備ファイル
ファイルアドレス:*/src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

//     （  ）
import Home from '../views/Home.vue'

//         VueRouter
Vue.use(VueRouter)

const routes = [
  {
     
    path: '/',
    name: 'Home',
    component: Home
  }
]

const router = new VueRouter({
     
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

ファイルアドレス*/src/main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router' //     
import store from './store'

Vue.config.productionTip = false

new Vue({
     
  router, //     
  store,
  render: h => h(App)
}).$mount('#app')

ルーティングのジャンプ
router-linkの使用

   ：            
  
   ：                
  

コード方式

this.$router.go(-1)//           

this.$router.replace('/menu')//       

this.$router.replace({
     name:'menuLink'})//           

this.$router.push('/menu')  push    

this.$router.push({
     name:'menuLink'})  push          

ここでreplaceとpushのジャンプ方式が異なる点は
Push:前のページが保存され、ブラウザは前のページに戻ることができます.
replace:上と反対
コアルーティングの伝達パラメータ
router-linkを使用してパラメータを転送

  
//        params    ，       

//    
   this.$route.params

routerのpath(アドレス)を構成することによってパラメータを伝達する------よく使われない

const routes = [
  {
     
    path: '/home/:name',
    name: 'Home',
    component: Home
  }
]

       ：         
http://localhost:8080/home/15     15  name  

     
<router-link to="/home/15">  </router-link>

//    
   this.$route.params

コードによる参照

this.$router.push({
     
    name: 'Home',
    params: {
     
        qian: 'wd'
    }
})

//    
   this.$route.params