HTML部分
??? <scriptsrc="js/vue.js"></script>
??? <scriptsrc="js/vue-router.js"></script>
??? <divid="app">
??? <h1>Hello App!</h1>
<!-- 通過傳入 `to` 屬性指定鏈接. -->
<!-- <router-link> 默認(rèn)會(huì)被渲染成一個(gè) `<a>` 標(biāo)簽 -->
??? <router-linkto="/foo">Go to Foo</router-link>
??? <router-linkto="/bar">Go to Bar</router-link>
??? </p>
<!-- 路由出口 -->
<!-- 路由匹配到的組件將渲染在這里 -->
??? <router-view></router-view>
??? </div>
JavaScript部分
// 0. 如果使用模塊化機(jī)制編程返咱，導(dǎo)入Vue和VueRouter辩稽，要調(diào)用 Vue.use(VueRouter)
// 1. 定義 (路由) 組件。
// 可以從其他文件 import 進(jìn)來
??? constFoo={template:'<div>foo</div>'}
??? constBar={template:'<div>bar</div>'}
// 2. 定義路由
// 每個(gè)路由應(yīng)該映射一個(gè)組件朵锣。 其中"component" 可以是
// 通過 Vue.extend() 創(chuàng)建的組件構(gòu)造器，
// 或者唠椭，只是一個(gè)組件配置對象趴捅。
// 我們晚點(diǎn)再討論嵌套路由羔味。
??? constroutes=[
??? {path:'/foo',component:Foo},
??? {path:'/bar',component:Bar}
?? ]
// 3. 創(chuàng)建 router 實(shí)例兵钮，然后傳 `routes` 配置
// 你還可以傳別的配置參數(shù), 不過先這么簡單著吧。
??? constrouter=newVueRouter({
??? routes// (縮寫) 相當(dāng)于 routes: routes
?? })
// 4. 創(chuàng)建和掛載根實(shí)例舌界。
// 記得要通過 router 配置參數(shù)注入路由掘譬，
// 從而讓整個(gè)應(yīng)用都有路由功能
??? constapp=newVue({
??? router
??? }).$mount('#app')
/ 現(xiàn)在，應(yīng)用已經(jīng)啟動(dòng)了呻拌！
路由的嵌套
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>Document</title>
</head>
<body>
? <div id='app'>
? ? ? <router-link to='/home'>首頁</router-link>
? ? ? <router-link to='/user'>用戶頁</router-link>
? ? ? <router-view></router-view>
? </div>
? <script src='js/vue.js'></script>
? <script src='js/vue-router.js'></script>
? <script>
? ? ? //2.
? ? ? var Home={
? ? ? ? ? template:`<h1>這是首頁</h1>`
? ? ? }
? ? ? var? User={
? ? ? ? ? template:`
? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? <h1>這是用戶頁</h1>
? ? ? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? ? ? ? ? <router-link to='/user/regist'>注冊</router-link>
? ? ? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? ? ? ? ? <router-link to='/user/login'>登錄</router-link>
? ? ? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? ? ? </ul>
? ? ? ? ? ? ? ? <router-view></router-view>
? ? ? ? ? ? </div>
? ? ? ? ? `
? ? ? }
? ? ? var Regist={
? ? ? ? ? template:`<h3>這是注冊頁面</h3>`
? ? ? }
? ? ? ? var Login={
? ? ? ? ? template:`<h3>這是登錄頁面</h3>`
? ? ? }
? ? ? //3.
? ? ? const routes=[
? ? ? ? ? {path:'/',component:Home},
? ? ? ? ? {path:'/home',component:Home},
? ? ? ? ? {
? ? ? ? ? ? ? path:'/user',
? ? ? ? ? ? ? component:User,
? ? ? ? ? ? ? children:[
? ? ? ? ? ? ? ? ? {path:'regist',component:Regist},
? ? ? ? ? ? ? ? ? {path:'login',component:Login}
? ? ? ? ? ? ? ]
? ? ? ? ? }
? ? ? ]
? ? ? //4.
? ? ? const router=new VueRouter({
? ? ? ? ? routes:routes
? ? ? })
? ? ? //5.
? ? ? new Vue({
? ? ? ? ? el:'#app',
? ? ? ? ? router:router
? ? ? })
? ? </script>
</body>
</html>
傳參
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>Document</title>
</head>
<body>
? <div id='app'>
? ? ? <router-link to='/home'>首頁</router-link>
? ? ? <router-link to='/user'>用戶頁</router-link>
? ? ? <router-view></router-view>
? </div>
? <script src='js/vue.js'></script>
? <script src='js/vue-router.js'></script>
? <script>
? ? ? //2.
? ? ? var Home={
? ? ? ? ? template:`<h1>這是首頁</h1>`
? ? ? }
? ? ? var? User={
? ? ? ? ? template:`
? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? <h1>這是用戶頁</h1>
? ? ? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? ? ? ? ? <router-link to='/user/regist?uname=jack&&age=18'>注冊</router-link>
? ? ? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? ? ? ? ? <router-link to='/user/login/alice/20'>登錄</router-link>
? ? ? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? ? ? </ul>
? ? ? ? ? ? ? ? <router-view></router-view>
? ? ? ? ? ? </div>
? ? ? ? ? `
? ? ? }
? ? ? var Regist={
? ? ? ? ? template:`
? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? <h3>這是注冊頁面</h3>
? ? ? ? ? ? ? ? <a href=''>{{$route.query}}</a>
? ? ? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? ? ? <li>{{$route.query.uname}}</li>
? ? ? ? ? ? ? ? ? ? <li>{{$route.query.age}}</li>
? ? ? ? ? ? ? ? </ul>
? ? ? ? ? ? </div>
? ? ? ? ? ? `
? ? ? }
? ? ? ? var Login={
? ? ? ? ? template:`
? ? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? <h3>這是登錄頁面</h3>
? ? ? ? ? ? ? ? <p>{{$route.params}}</p>
? ? ? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? ? ? <li>{{$route.params.userName}}</li>
? ? ? ? ? ? ? ? ? ? <li>{{$route.params.userage}}</li>
? ? ? ? ? ? ? ? </ul>
? ? ? ? ? ? ? </div>
? ? ? ? ? ? `
? ? ? }
? ? ? //3.
? ? ? const routes=[
? ? ? ? ? {path:'/',component:Home},
? ? ? ? ? {path:'/home',component:Home},
? ? ? ? ? {
? ? ? ? ? ? ? path:'/user',
? ? ? ? ? ? ? component:User,
? ? ? ? ? ? ? children:[
? ? ? ? ? ? ? ? ? {path:'regist',component:Regist},
? ? ? ? ? ? ? ? ? {path:'login/:userName/:userage',component:Login}?
? ? ? ? ? ? ? ]
? ? ? ? ? }
? ? ? ]
? ? ? //4.
? ? ? const router=new VueRouter({
? ? ? ? ? routes:routes
? ? ? })
? ? ? //5.
? ? ? new Vue({
? ? ? ? ? el:'#app',
? ? ? ? ? router:router
? ? ? })
? ? </script>
</body>
</html>
