Vue学习(10)————————编程式导航，地址栏的#号去掉，路由的嵌套

 利用js，按钮事件跳转组件

<template>
  <div>
  	<h1>我是详情页面,传过来的Key值为{
  {keyid}}</h1><br/>
  	<button v-on:click="jumpHeader()">通过Js跳转到Header组件</button>
  </div>
</template>
<script>
	export default{
      data(){
		return{
		  msg:'我是详情页面+1',
		  keyid:''
		}
	  },
	  methods:{
	  	jumpHeader(){
	  		
	  		this.$router.push({ path:'header' });
	  	}
	  },
	  mounted(){
	  	console.log(this.$route.query); /*获取get传过来的值*/
	  	alert(this.$route.query.keyid);
	  	this.keyid = this.$route.query.keyid;
	  }
	}
</script>
<style lang="scss" scoped="scoped">
</style>

还可以给路由起个名字 用名字跳转

main.js配置

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

  { path: '/content/:aid', component: Content },   /*动态路由*/

  { path: '*', redirect: '/home' }   /*默认跳转路由*/
]

组件内编写

//另一种跳转方式
              this.$router.push({ name:'news' });
    
 //传参跳转方式                   

              this.$router.push({ name: 'news', params: { userId: 123 }})

——————————————————————————————————