關於router的用法

//在html中的相關程式碼
<div id="app">
	<div>
		<router-link to="/">首頁</router-link>  //<router-link>是Vue-router自帶的
		<router-link to="/about">關於我們</router-link>
	</div>
	<div>
		<router-view></router-view>//想要讓內容渲染視覺化，要使用這個標記
	</div>
</div>
 

//在Vue.js中的相關程式碼
var nqy = [
	{
		path:'/',
		component:{
				template:`
					<div>
						<h1>首頁</h1>
					</div>
				`,
			}
	},
		{
		path:'/about',
		component:{
				template:`
					<div>
						<h1>關於我們</h1>
					</div>
				`,
			}
	},
];
var nyp = new VueRouter({
	routes:nqy,  //這裡的routes是VueRouter中自帶的屬性
});
var app = new Vue({
	el:'#app',
	router:nyp,   //這裡的router是Vue中自帶的屬性
});
 

關於Vue-router的傳參

//在html中的相關程式碼
<div id="app">
	<div>
		<router-link to="/">首頁</router-link>  //<router-link>是Vue-router自帶的
		<router-link to="/about">關於我們</router-link>
		<router-link to="/user/張三三">張三三</router-link>
		<router-link to="/user/李四四">李四四</router-link>
	</div>
	<div>
		<router-view></router-view>//想要讓內容渲染視覺化，要使用這個標記
	</div>
</div>
 

//在Vue.js中的相關程式碼
var nqy = [
	{
		path:'/',
		component:{
				template:`
					<div>
						<h1>首頁</h1>
					</div>
				`,
			}
	},
		{
		path:'/about',
		component:{
				template:`
					<div>
						<h1>關於我們</h1>
					</div>
				`,
			}
	},
			{
		path:'/user:name',
		component:{
				template:`
					<div>
						<div>我叫：{{@router.params.name}}</div>
						<div>我叫：{{@router.query.age}}</div> //這個方法是在位址列中輸入/age = number進行傳參
					</div>
				`,
			}
	},
];
var nyp = new VueRouter({
	routes:nqy,  //這裡的routes是VueRouter中自帶的屬性
});
var app = new Vue({
	el:'#app',
	router:nyp,   //這裡的router是Vue中自帶的屬性
});