Vue之Router之编程式路由（045）

Vue之Router之编程式路由

一、项目结构

二、main.js文件

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import router from './router/index.js'
Vue.use(VueRouter)
Vue.config.productionTip = false

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

三、app.vue

<template>
  <div id="app">
    <h1>I LOVE FIFE</h1>
        <li v-for="n in news" :key="n.id">
          <button @click="toNews(n)" >{{n.title}}</button>
        </li>
    <br>
    <button @click="forward">向前</button>
    <button @click="back">向后</button>
    <br><br>
    <h3>展示</h3>
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'App',
 data(){
   return{
     news:[
       {id:'001',title:'life01'},
       {id:'002',title:'life02'},
       {id:'003',title:'life03'},
       {id:'004',title:'life04'},
     ]
   }
  },
  methods:{
    toNews(n){
      this.$router.push({
      name:'news',
      params:{id:n.id,title:n.title}
      })
    },
    forward(){
      this.$router.forward()
    },
    back(){
      this.$router.back()
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

四、indes.js文件

import VueRouter from "vue-router"
import news from '../pages/news.vue'

export default new VueRouter({
  routes:[
     {
         name:'news',
         path:'/news/:id/:title',
         component:news,
         props: true
     }
    ]
})

五、news.vue

<template>
  <div>
      <li>{{id}}</li>
      <li>{{title}}</li>
  </div>
</template>

<script>
export default {
name:'news',
props:["id","title"]
}
</script>

六、效果

总结：其实就是把<router-link :to="{}" ，to=后面的迁入到this.$router.push（）里，当然也是可以就.repalce模式。