利用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 }})
 

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

終於到點上的了，咱們跳轉位址列不是有個很醜的#號嗎，終於要說去掉的方法了 

vue-router 預設是hash模式--使用url的hash來模擬一個完整的url，於是當url改變時
頁面不會重寫載入。
如果不想要很醜的hash，我們可以用路由的history模式，這種模式充分利用
history.pushState API來完成

Main.js

const routes = [
  { path: '/header', component: header },
  { path: '/news', component: news },
  { path: '/content', component: content }, /* 動態路由 （就是個傳值）*/
 
  { path: '*', redirect: '/header' }   /*預設跳轉路由*/
]
//3.例項化VueRouter
const router = new VueRouter({
	mode:'history',
	routes:routes//引用的上面定義的
})
 

這樣就可以了。。。好簡單

但是這個模式有個問題

比如去直接訪問/index.html會有問題
要配合後端去做
這個到時候說=。=

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

路由的巢狀

示例圖

 點選了上面的標籤然後顯示左邊的標籤，然後上面的標籤不變

這就是路由的巢狀，也可以叫父子路由

現在我們寫個小例子，最上層是使用者中心，點出左邊出現使用者列表各項操作列表，

點選各種操作 ， 右邊的主顯示框顯示可以操作的內容

首先 先建立一個User.vue 

先註冊上路由

import header from './components/Header.vue';
import news from './components/News.vue';
import content from './components/Content.vue';
import User from './components/User.vue';
	import userlist from './components/User/UserList.vue';
	import useradd from './components/User/UserAdd.vue';
//2.配置路由
const routes = [
  { path: '/header', component: header },
  { path: '/news', component: news },
  { path: '/content', component: content }, /* 動態路由 （就是個傳值）*/
 	
 	{ path: '/user/', component: User,
 		children:[
 			{path:'userlist' , component: userlist},
 			{path:'useradd' , component: useradd}
 		]
 	},
 	
  { path: '*', redirect: '/header' }   /*預設跳轉路由*/
]

然後再vue元件實現一個div左右佈局

<template>
  <div id="user">
  	<h1>{{msg}}</h1><br/>
  	<div class="user">
  	
  		<div class="left">
  			<ul>
  				<li><router-link to="/user/userlist">使用者列表</router-link></li>
  				<li><router-link to="/user/useradd">新增使用者</router-link></li>
  			</ul>
  		</div>
  		
  		<div class="right">
  			<router-view></router-view>
  		</div>
  		
  	</div>
  </div>
</template>
<script>
	export default{
		data(){
			return{
				msg:'使用者中心',
				list:['使用者查詢','使用者管理','使用者匯入','使用者匯出']
			}
		},
		methods:{
		}
	}
</script>
<style lang="scss" scoped="scoped">
	.user{
		display: flex;
		text-align: center;
		
		.left{
			
			width: 200px;
			
			min-height: 400px;
			
			border-right: 1px solid #eee;
		}
		.right{
			
			flex:1;
		}
		
	}
</style>

然後該去建立一個屬於他子路由的資料夾路徑便於區分

裡面的內容就是顯示一個自己是誰=。=

接著去配置他們倆的路由吧

import header from './components/Header.vue';
import news from './components/News.vue';
import content from './components/Content.vue';
import User from './components/User.vue';
	import userlist from './components/User/UserList.vue';
	import useradd from './components/User/UserAdd.vue';
//2.配置路由
const routes = [
  { path: '/header', component: header },
  { path: '/news', component: news },
  { path: '/content', component: content }, /* 動態路由 （就是個傳值）*/
 	
 	{ path: '/user/', component: User,
 		children:[
 			{path:'userlist' , component: userlist},
 			{path:'useradd' , component: useradd}
 		]
 	},
 	
  { path: '*', redirect: '/header' }   /*預設跳轉路由*/
]

重點就是在user路由裡 加一個children屬性  然後裡面的配置引數和上一級一樣

之後就到了去配置user.vue的一個入口了（）

  		<div class="right">
  			<router-view></router-view>
  		</div>

然後點選左邊的列表就完成了這種功能

但是這樣還會有一個問題，進入這個使用者中心了，但是右邊預設是沒有東西的 會很空 ，那麼我們可以讓他預設去載入一個子路由的內容

直接在App.vue 進入 路徑這麼寫就可以了

  	<router-link to="/user/userlist">使用者中心</router-link>