vue.js中Vue-router 2.0基礎(chǔ)的示例分析

這篇文章主要介紹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)注億速云行業(yè)資訊頻道！