vue.js中Vue-router2.0基礎(chǔ)的示例分析-創(chuàng)新互聯(lián)
這篇文章主要介紹vue.js中Vue-router 2.0基礎(chǔ)的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！
一、基礎(chǔ)用法：
<div id="app"> <h2>Hello App!</h2> <p> <!-- 使用 router-link 組件來導(dǎo)航. --> <!-- 通過傳入 `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)來
const Foo = { template:'#foo' };
const Bar = { template:'#bar' };
// 2. 定義路由
// 每個(gè)路由應(yīng)該映射一個(gè)組件。 其中"component" 可以是
// 通過 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ù), 不過先這么簡(jiǎn)單著吧。
const router = new VueRouter({ routes:routes });
// 4. 創(chuàng)建和掛載根實(shí)例。
// 記得要通過 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>主頁</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)建站muchs.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+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://muchs.cn/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í)需注明來源： 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容
- 建設(shè)網(wǎng)站常犯錯(cuò)誤有哪些-創(chuàng)新互聯(lián)
- 物理拋物線方程公式物理拋物線公式是什么？-創(chuàng)新互聯(lián)
- 多使用調(diào)用堆棧調(diào)試VC++代碼-創(chuàng)新互聯(lián)
- CMPT3：如何擴(kuò)展AD架構(gòu)？-創(chuàng)新互聯(lián)
- iOS中為cagetory添加屬性-創(chuàng)新互聯(lián)
- Android中怎么自定義彈出對(duì)話框-創(chuàng)新互聯(lián)
- mysql5.5--innodbbufferpool優(yōu)化-創(chuàng)新互聯(lián)
- 怎么建設(shè)電子商城網(wǎng)站？先要想清楚這些問題 2015-04-10
- 提高用戶體驗(yàn)是成功網(wǎng)站致勝法則 2016-10-15
- 網(wǎng)站建設(shè)后如何簡(jiǎn)單的做網(wǎng)站維護(hù) 2022-11-17
- 網(wǎng)站內(nèi)容的編輯是網(wǎng)站維護(hù)托管的重要事情 2021-10-04
- 網(wǎng)站維護(hù)托管服務(wù)，企業(yè)深圳建網(wǎng)站成本節(jié)約利器。 2021-04-26
- 網(wǎng)站維護(hù)，網(wǎng)站為何要做維護(hù)？云服務(wù)器租賃 2021-08-13
- 網(wǎng)站為什么打開速度慢為什么不收錄網(wǎng)站內(nèi)容 2016-08-16
- 如何寫出高質(zhì)量的文章讓百度快速收錄 2016-08-22
- 為什么說，小程序是產(chǎn)業(yè)互聯(lián)網(wǎng)的“大趨勢(shì)”？ 2016-08-11
- 網(wǎng)絡(luò)公司在網(wǎng)站維護(hù)項(xiàng)目中一般都做哪些維護(hù)，是怎么收費(fèi)的 2016-11-02
- 微信小程序代理加盟多少錢 2016-09-30
- 公司網(wǎng)站維護(hù)_如何確保企業(yè)網(wǎng)站建設(shè)的安全性？ 2021-12-08