(七)vue-router以编程模式js的方式实现( 命名路由跳转，普通路由跳转 ),以及动态路由传值和get传值的实现，路由别名

1：router.js的配置和(六)小节的完全一致

2: button按钮跳转

<button @click="gohone('ssww',no)">编程模式js跳转路由</button>

<button @click="gohone()">js编程模式调js函数跳转</button>

(1):动态路由传值

<button @click="`this.$router.push({ path: '/Details/22/${no}'})`">编程模式js路由跳转实现动态路由传值</button>

<button @click="this.$router.push({ path: '/Details/2211/6655' })"> 编程模式js路由跳转实现动态路由传值 </button>

<button @click="this.$router.push({ path: '/n1/2211/6655' })"> 别名的方式跳转并且实现动态路由传值 </button>

 <button @click="this.$router.push({name: 'DetailsRoute', params: { id: '3322', no: '45' } })">命名路由实现动态路由传值 </button>

(2):get传值

<button @click="this.$router.push({ path: '/getdetail', query: { id: 55, no: 322 } })">编程模式js路由跳转实现get传值</button>

<button @click="this.$router.push({ path: '/n1', query: { id: 55, no: 322 } })">别名的方式跳转并且实现get传值</button>

<button @click="this.$router.push({ name: 'GetdetailRoute', query: { id: '3322', no: '45' }})">命名路由实现get传值</button>

3：在methods里面定义gohone方法

<script>

export default {

  name: "App",

  components: {},

  methods: {

    gohone() {

      this.$router.push({

        path: "/NewsPath",

      });

    },

  },

};

</script>

3：接收页接收参数

(1)如果是get传参过来的,用this.$route.query.id方式获取传过来的参数

export default {

  name:  'GetDetailFrom',

  props: {

  },mounted(){//页面加载完后执行得钩子事件

    alert(this.$route.query.id)

     alert(this.$route.query.no)

  }

};

(2)如果是动态路由传参过来的,用this.$route.params.id方式获取传过来的参数

export default {

  name:  'DetailFrom',

  props: {

  },mounted(){//页面加载完后执行得钩子事件

    alert(this.$route.params.id)

     alert(this.$route.params.no)

  }

};