Vue2.x路由的步驟

時間 2019-12-11

標籤 vue2.x vue 路由步驟欄目系統網絡简体版

原文原文鏈接

建立路由步驟：html

1.引入vue-router庫，可用最新版https://unpkg.com/vue-routervue

2.建立所須要的組件vue-router

3.建立router實例對象組件化

4.在根實例中註冊一下 =》方式：router:routercomponent

實例以下：router

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="https://unpkg.com/vue"></script>
		<script src="https://unpkg.com/vue-router"></script>
		<title>組件化</title>
	</head>
	<body>
		<div id="box">
			<router-link to="/home">主頁</router-link>
			<router-link to="/news">新聞</router-link>
			<hr />
			<router-view></router-view>
		</div>
		
		<template id="home">
			<div>
				<bbb></bbb>
				<p>{{msg}}</p>
			</div>
		</template>
		
		<template id="news">
			<div>
				<bbb></bbb>
				<p>{{msg}}</p>
			</div>
		</template>
		
		<template id="bbb">
			<div>
				<h1>模板</h1>
			</div>
		</template>
		
		<script>
			//1.建立組件
			var Home=Vue.extend({
				template:"#home",
				data(){
					return { msg:"我是主頁模板" };
				},
				components:{
					'bbb':{
						template:"#bbb"
					}
				}
			});
			
			var News=Vue.extend({
				template:"#news",
				data(){
					return { msg:"我是新聞模板" };
				},
				components:{
					'bbb':{
						template:"#bbb"
					}
				}
			});
			
			//2.建立Router實例對象
			var router=new VueRouter(
				{
					routes:[
						{path:"/home",component:Home},
						{path:"/news",component:News}
					]
				}
			);
			
			//3.建立根實例對象，經過路由配置參數注入路由，讓整個應用都有相應的路由地址
			var vm=new Vue({
				router:router
			}).$mount("#box");
		</script>
	</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。