Vue router

安裝

npm install vue-router

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

git clone https://github.com/vuejs/vue-router.git node_modules/vue-router
cd node_modules/vue-router
npm install
npm run build

起步

Html

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <h1>Hello App!</h1>
  <p>  
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <router-view></router-view>
</div>

JavaScript

// 內容
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 定義路線(連結)
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]
// 定義框架 
const router = new VueRouter({
  routes
})
// 顯示(id)
const app = new Vue({
  router
}).$mount('#app')

佈局

View

<div id="app">
  <router-view></router-view>
</div>

// 內容
const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}
// 定義路線(連結)
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})

範例

Html

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
</div>

JavaScript

Vue.use(VueRouter)
//次項目內容
var Vue_install = {
	template: `<div>安裝</div>`
}
var Vue_start = {
	template: `<div>起步</div>`
}
var Vue_view = {
	template: `<div>佈局</div>`
}
var Vue_example = {
	template: `<div>範例</div>`
}
var Vue_router = {
	template: `<div>                
		<router-link to="/Vue_router/Vue_install">安裝</router-link>
		<router-link to="/Vue_router/Vue_start">起步</router-link>
		<router-link to="/Vue_router/Vue_view">佈局</router-link>
		<router-link to="/Vue_router/Vue_example">範例</router-link>
		<router-view></router-view></div>`
}
var Home = {
	tempalte: `<div>Vue首頁</div>`
}
//次項目框架
const router = new VueRouter({
	routes: [{
			path: '/Vue_router',
			component: Vue_router,
			children: [{
					path: '/Vue_router/Vue_install',
						component: Vue_install
					},
					{
						path: '/Vue_router/Vue_start',
						component: Vue_start
					},
					{
						path: '/Vue_router/Vue_view',
						component: Vue_view
					},
					{
						path: '/Vue_router/Vue_example',
						component: Vue_example
					},]
			},
			{
				path: '/home',
				component: Home
			}
		]
})
//主項目內容
var Veu_menu = {
	template: `<div>
		<router-link to="/home">開始Veu</router-link>
		<router-link to="/Vue_router">Veu Router</router-link>
		<router-view></router-view></div>`
}
//主框架
const app = new Vue({
	el: '#app',
	router,
	components: {
		Veu_menu,
	},
	template: `<Veu_menu />`,
})