vue--ルーティングインストールの開始

vueルーティング上書きステップ–フロント・ガードがログインしているかどうかを確認
ルーティングのインストール
cnpm install --save vue-router
ルーティングの設定
src/router/indexを作成します.jsディレクトリ、次のコードを入力

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from  '../components/HelloWorld'

Vue.use(Router);

export default new Router({
     

    routes:[
        {
     
            path:"/",
            component:HelloWorld
        }
    ]

});

メールでjsにルーティングを導入する

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

Vue.config.productionTip = false

new Vue({
     
  el: '#app',
  router,
  components: {
      App },
  template: ''
})

Appでvueでのルーティングビューの使用

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>
<script>
export default {
     
  name: 'App'
}
</script>

新しいコンポーネント***を作成します.vue

<template>
    <div>
        Home Page
    </div>
</template>

ルーティングの変更(src/router/index.js)

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from  '../components/HelloWorld'
import Home from '../components/***.vue'

Vue.use(Router);
export default new Router({
     
    routes:[
        {
     
            path:"/",
            component:HelloWorld
        },{
     
            path:"/***",
            component:***
        }
    ]
});

ページジャンプ
送信値

<template>
  <div class="hello"> 
    <button @click="doclick()">       </button><br>
    <input type="text" v-model="msg"><br>
    <button @click="doclickcanshu(msg)">       </button>
  </div>
</template>

<script>
export default {
     
  name: 'HelloWorld',
  data(){
     
    return {
     
      msg:""
    }
  },methods:{
     
      doclick(){
     
        this.$router.push({
      path: 'helloworld1' });
      },doclickcanshu(val){
     
        this.$router.push({
      name: 'helloworld1' , params: {
      item: val }});
      }
  }
}
</script>

受信値

<template>
  <div>
        
    <p v-if="!msg">       </p>
    <p v-else>{
     {
     msg}}</p>
  </div>
</template>>

<script>
export default {
     
  name: 'App',
  data(){
     
    return {
     
      msg:""
    }
  },
  created() {
     
    this.msg = this.$route.params.item;
    console.log(this.$route.params.item);
  },
}
</script>