路由Router
路由定義使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<script src="vue-router.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<router-link to="/show"></router-link>
<router-link to="/show2">按鈕點擊跳轉</router-link>
<router-view></router-view>
</div>
<template id="com">
<div id="">
<h1>利用路由顯示</h1>
</div>
</template>
<template id="com2">
<div id="">
<h1>點擊按鈕後顯示</h1>
</div>
</template>
<script>
var com = {
template:'#com'
}
var com2 = {
template:'#com2'
}
var routes = [
{path:'/',redirect:'/show'},
{path:'/show',component:com},
{path:'/show2',component:com2}
]
var router = new VueRouter({
routes
})
new Vue({
el:'#app',
router
})
</script>
</body>
</html>
如上述程序，首先要引入vue-router.js文件，這樣才能使用路由。同時注意，要先引入vue.js文件後再引入vue-router.js文件，這樣才能生效。
如上述程序，路由在實現單頁面內的跳轉是非常簡單的。路由的使用依靠，兩個標籤：<router-link to="/show"></router-link>和<router-view></router-view>,在router-link組件中to屬性是頁面內跳轉的url，其與下面這段程序相照應：
var routes = [
{path:'/',redirect:'/show'},
{path:'/show',component:com},
{path:'/show2',component:com2}
]
當路徑爲/時，重定義爲：/show，當路徑爲/show時，在標籤<router-view></router-view>中調用的是com組件，同樣，當path爲/show2是，標籤中調用的是組件com2.
補充：<router-link></router-link>和<router-view></router-view>這兩個標籤是vue提供的。其中<router-link></router-link>標籤相當於html中的標籤，不過在vue中表現要更好。
路由傳參
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<script src="vue-router.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<router-link to="/show/123456">測試傳參路由</router-link>
<router-view></router-view>
</div>
<template id="com">
<div id="">
<h1>傳入參數id——{{$route.params.id}}</h1>
</div>
</template>
<script type="text/javascript">
var com = {
template:'#com'
}
var routes =[
{path:'/show/:id',component:com}
]
var router = new VueRouter({
routes
})
new Vue({
el:'#app',
router
})
</script>
</body>
</html>
如上述程序所示，關於傳參的方法格式是<router-link></router-link>標籤中to屬性的/show/123456，其對應的是{path:'/show/:id',component:com}這段程序，其中id就是123456。在組件中可以使用$route.params.id獲得傳入的值。
路由的嵌套
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<script src="vue-router.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<router-link to="/new">新聞</router-link>
<router-link to="/home">主頁</router-link>
<router-view></router-view>
</div>
<template id="new">
<h1>這是新聞頁面</h1>
</template>
<template id="home">
<div id="">
<router-link to="/home/login">登錄</router-link>
<router-link to="/home/reg">註冊</router-link>
<router-view></router-view>
</div>
</template>
<template id="login">
<h3>這是登錄子頁面</h3>
</template>
<template id="reg">
<h3>這是註冊子頁面</h3>
</template>
<script type="text/javascript">
var reg = {
template:'#reg'
}
var login = {
template:'#login'
}
var home = {
template:'#home'
}
var n = {
template:'#new'
}
var routes = [
{path:'/',rediect:'/new'},
{path:'/new',component:n},
{path:'/home',component:home,
children:[
{path:'login',component:login},
{path:'reg',component:reg}
]}
]
var router = new VueRouter({
routes
})
new Vue({
el:'#app',
router
})
</script>
</body>
</html>
如上述的程序，在路由中點擊home，進入登錄/註冊的組件。路由的嵌套主要是通過children屬性實現的。