技術標籤：前端筆記vue

引入vue-router.js

vue-router.js要放到vue.js之後
<script src="js/vue.js"  type="text/javascript" charset="utf-8"></script>
<script src="js/vue-router.js"></script>

簡單例子

<div id="app">
   <h1>hello,world!</h1
 
>
   <p>
	   <!-- 通過to屬性指定連結 -->
	   <!-- <router-link>會被渲染成<a>標籤 -->
	   <router-link to="/">首頁</router-link>
	   <router-link to="/student">會員管理</router-link>
	   <router-link to="/teacher">講師管理</router-link>
 

   </p>
   <router-view></router-view>
</div>
 
<script>
	// 1. 定義路由元件
	const welcome = {template:`<div>歡迎</div>`}
	const teacher = {template:`<div>teacher list</div>`}
	const student = {template:`<div>student list</div>`}
	// 2. 定義路由,每個路由應該對映一個元件
 

	const routes = [
		{path:'/',redirect:'/welcome'},
		{path:'/welcome',component:welcome},
		{path:'/teacher',component:teacher},
		{path:'/student',component:student}
	]
	// 3. 建立router例項,然後傳routes配置
	const router = new VueRouter({
		routes  //縮寫，相當於 routes:routes
	})
	//4. 建立和掛載根例項，從而讓整個應用都有路由功能
	var vm = new Vue({
		el:"#app",
		router
	});
</script>