這篇文章主要介紹vue.js中Vue-router 2.0基礎(chǔ)的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)公司聯(lián)系熱線：13518219792，為您提供成都網(wǎng)站建設(shè)網(wǎng)頁(yè)設(shè)計(jì)及定制高端網(wǎng)站建設(shè)服務(wù)，創(chuàng)新互聯(lián)公司網(wǎng)頁(yè)制作領(lǐng)域十多年，包括成都辦公窗簾等多個(gè)領(lǐng)域擁有多年的網(wǎng)站營(yíng)銷經(jīng)驗(yàn)，選擇創(chuàng)新互聯(lián)公司，為企業(yè)錦上添花。

一、基礎(chǔ)用法：

<div id="app"> 
 <h2>Hello App!</h2> 
 <p> 
  <!-- 使用 router-link 組件來(lái)導(dǎo)航. --> 
  <!-- 通過(guò)傳入 `to` 屬性指定鏈接. --> 
  <!-- <router-link> 默認(rèn)會(huì)被渲染成一個(gè) `<a>` 標(biāo)簽 --> 
  <router-link to="/foo">Go to Foo</router-link> 
  <router-link to="/bar">Go to Bar</router-link> 
 </p> 
 <!-- 路由出口 --> 
 <!-- 路由匹配到的組件將渲染在這里 --> 
 <router-view></router-view> 
</div> 
 
<template id='foo'> 
 <p>this is foo!</p> 
</template> 
<template id='bar'> 
 <p>this is bar!</p> 
</template>

// 1. 定義（路由）組件。 
// 可以從其他文件 import 進(jìn)來(lái) 
const Foo = { template:'#foo' }; 
const Bar = { template:'#bar' }; 
// 2. 定義路由 
// 每個(gè)路由應(yīng)該映射一個(gè)組件。 其中"component" 可以是 
// 通過(guò) Vue.extend() 創(chuàng)建的組件構(gòu)造器， 
// 或者，只是一個(gè)組件配置對(duì)象。 
const routes = [ 
 { path: '/foo', component: Foo }, 
 { path: '/bar', component: Bar } 
]; 
// 3. 創(chuàng)建 router 實(shí)例，然后傳 `routes` 配置 
// 你還可以傳別的配置參數(shù), 不過(guò)先這么簡(jiǎn)單著吧。 
const router = new VueRouter({ routes:routes }); 
// 4. 創(chuàng)建和掛載根實(shí)例。 
// 記得要通過(guò) router 配置參數(shù)注入路由， 
// 從而讓整個(gè)應(yīng)用都有路由功能 
const app = new Vue({ router:router }).$mount('#app');

二、動(dòng)態(tài)路由匹配：

<div id="app"> 
 <h2>Hello App!</h2> 
 <p> 
  <router-link to="/user/foo/post/123">Go to Foo</router-link> 
  <router-link to="/user/bar/post/456">Go to Bar</router-link> 
 </p> 
 <router-view></router-view> 
</div> 
 
<template id='user'> 
 <p>User:{{ $route.params.id }},Post:{{$route.params.post_id}}</p> 
</template>

// 1. 定義組件。 
const User = { 
 template:'#user', 
 watch:{ 
  '$route'(to,from){ 
   console.log('從'+from.params.id+'到'+to.params.id); 
  } 
 } 
}; 
// 2. 創(chuàng)建路由實(shí)例 (可設(shè)置多段路徑參數(shù)) 
const router = new VueRouter({ 
 routes:[ 
  { path:'/user/:id/post/:post_id',component:User } 
 ] 
}); 
//3. 創(chuàng)建和掛載根實(shí)例 
const app = new Vue({ router:router }).$mount('#app');

三、嵌套路由：

<div id="app"> 
 <h2>Hello App!</h2> 
 <p> 
  <router-link to="/user/foo">Go to Foo</router-link> 
  <router-link to="/user/foo/profile">Go to profile</router-link> 
  <router-link to="/user/foo/posts">Go to posts</router-link> 
 </p> 
 <router-view></router-view> 
</div> 
 
<template id='user'> 
 <div> 
  <h3>User:{{ $route.params.id }}</h3> 
  <router-view></router-view> 
 </div> 
</template> 
 
<template id="userHome"> 
 <p>主頁(yè)</p> 
</template> 
 
<template id="userProfile"> 
 <p>概況</p> 
</template> 
 
<template id="userPosts"> 
 <p>登錄信息</p> 
</template>

// 1. 定義組件。 
const User = { 
 template:'#user' 
}; 
const UserHome = { 
 template:'#userHome' 
}; 
const UserProfile = { 
 template:'#userProfile' 
}; 
const UserPosts = { 
 template:'#userPosts' 
}; 
// 2. 創(chuàng)建路由實(shí)例 
const router = new VueRouter({ 
 routes:[ 
  { path:'/user/:id', component:User, 
   children:[ 
    // 當(dāng) /user/:id 匹配成功， 
    // UserHome 會(huì)被渲染在 User 的 <router-view> 中 
    { path: '', component: UserHome}, 
    // 當(dāng) /user/:id/profile 匹配成功， 
    // UserProfile 會(huì)被渲染在 User 的 <router-view> 中 
    { path:'profile', component:UserProfile }, 
    // 當(dāng) /user/:id/posts 匹配成功 
    // UserPosts 會(huì)被渲染在 User 的 <router-view> 中 
    { path: 'posts', component: UserPosts } 
   ] 
  } 
 ] 
}); 
//3. 創(chuàng)建和掛載根實(shí)例 
const app = new Vue({ router:router }).$mount('#app');

四、編程式路由：

<div id="app"> 
 <h2>Hello App!</h2> 
 <p> 
  <router-link to="/user/foo">Go to Foo</router-link> 
 </p> 
 <router-view></router-view> 
</div> 
 
<template id='user'> 
 <h3>User:{{ $route.params.id }}</h3> 
</template> 
 
<template id="register"> 
 <p>注冊(cè)</p> 
</template>

// 1. 定義組件。 
const User = { 
 template:'#user' 
}; 
const Register = { 
 template:'#register' 
}; 
// 2. 創(chuàng)建路由實(shí)例 
const router = new VueRouter({ 
 routes:[ 
  { path:'/user/:id', component:User }, 
  { path:'/register', component:Register } 
 ] 
}); 
//3. 創(chuàng)建和掛載根實(shí)例 
const app = new Vue({ router:router }).$mount('#app'); 
 
//4.router.push(location) 
router.push({ path: 'register', query: { plan: 'private' }});

五、命名路由：

<div id="app"> 
 <h2>Named Routes</h2> 
 <p>Current route name: {{ $route.name }}</p> 
 <ul> 
  <li><router-link :to="{ name: 'home' }">home</router-link></li> 
  <li><router-link :to="{ name: 'foo' }">foo</router-link></li> 
  <li><router-link :to="{ name: 'bar', params: { id: 123 }}">bar</router-link></li> 
 </ul> 
 <router-view class="view"></router-view> 
</div> 
 
<template id='home'> 
 <div>This is Home</div> 
</template> 
 
<template id='foo'> 
 <div>This is Foo</div> 
</template> 
 
<template id='bar'> 
 <div>This is Bar {{ $route.params.id }}</div> 
</template>

const Home = { template: '#home' }; 
const Foo = { template: '#foo' }; 
const Bar = { template: '#bar' }; 
 
const router = new VueRouter({ 
 routes: [ 
  { path: '/', name: 'home', component: Home }, 
  { path: '/foo', name: 'foo', component: Foo }, 
  { path: '/bar/:id', name: 'bar', component: Bar } 
 ] 
}); 
 
new Vue({ router:router }).$mount('#app');

六、命名視圖：

<div id="app"> 
 <router-link to="/">Go to Foo</router-link> 
 <router-view class="view one"></router-view> 
 <router-view class="view two" name="a"></router-view> 
 <router-view class="view three" name="b"></router-view> 
</div> 
 
<template id='foo'> 
 <div>This is Foo</div> 
</template> 
 
<template id='bar'> 
 <div>This is Bar {{ $route.params.id }}</div> 
</template> 
 
<template id='baz'> 
 <div>This is baz</div> 
</template>

const Foo = { template: '#foo' }; 
const Bar = { template: '#bar' }; 
const Baz = { template: '#baz' }; 
 
const router = new VueRouter({ 
 routes: [ 
  { 
   path: '/', 
   components: { 
    default:Foo, 
    a:Bar, 
    b:Baz 
   } 
  } 
 ] 
}); 
 
new Vue({ router:router }).$mount('#app');

以上是“vue.js中Vue-router 2.0基礎(chǔ)的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站jinyejixie.com，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

網(wǎng)站標(biāo)題：vue.js中Vue-router2.0基礎(chǔ)的示例分析-創(chuàng)新互聯(lián)
分享URL：http://jinyejixie.com/article22/egojc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動(dòng)網(wǎng)站建設(shè)、企業(yè)網(wǎng)站制作、品牌網(wǎng)站制作、網(wǎng)站維護(hù)、網(wǎng)站策劃、靜態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)