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

創新互聯公司專注于企業成都全網營銷推廣、網站重做改版、回民網站定制設計、自適應品牌網站建設、成都h5網站建設、電子商務商城網站建設、集團公司官網建設、外貿網站制作、高端網站制作、響應式網頁設計等建站業務，價格優惠性價比高，為回民等各大城市提供網站開發制作服務。

一、基礎用法：

<div id="app"> 
 <h2>Hello App!</h2> 
 <p> 
  <!-- 使用 router-link 組件來導航. --> 
  <!-- 通過傳入 `to` 屬性指定鏈接. --> 
  <!-- <router-link> 默認會被渲染成一個 `<a>` 標簽 --> 
  <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 進來 
const Foo = { template:'#foo' }; 
const Bar = { template:'#bar' }; 
// 2. 定義路由 
// 每個路由應該映射一個組件。 其中"component" 可以是 
// 通過 Vue.extend() 創建的組件構造器， 
// 或者，只是一個組件配置對象。 
const routes = [ 
 { path: '/foo', component: Foo }, 
 { path: '/bar', component: Bar } 
]; 
// 3. 創建 router 實例，然后傳 `routes` 配置 
// 你還可以傳別的配置參數, 不過先這么簡單著吧。 
const router = new VueRouter({ routes:routes }); 
// 4. 創建和掛載根實例。 
// 記得要通過 router 配置參數注入路由， 
// 從而讓整個應用都有路由功能 
const app = new Vue({ router:router }).$mount('#app');

二、動態路由匹配：

<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. 創建路由實例 (可設置多段路徑參數) 
const router = new VueRouter({ 
 routes:[ 
  { path:'/user/:id/post/:post_id',component:User } 
 ] 
}); 
//3. 創建和掛載根實例 
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. 創建路由實例 
const router = new VueRouter({ 
 routes:[ 
  { path:'/user/:id', component:User, 
   children:[ 
    // 當 /user/:id 匹配成功， 
    // UserHome 會被渲染在 User 的 <router-view> 中 
    { path: '', component: UserHome}, 
    // 當 /user/:id/profile 匹配成功， 
    // UserProfile 會被渲染在 User 的 <router-view> 中 
    { path:'profile', component:UserProfile }, 
    // 當 /user/:id/posts 匹配成功 
    // UserPosts 會被渲染在 User 的 <router-view> 中 
    { path: 'posts', component: UserPosts } 
   ] 
  } 
 ] 
}); 
//3. 創建和掛載根實例 
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>注冊</p> 
</template>

// 1. 定義組件。 
const User = { 
 template:'#user' 
}; 
const Register = { 
 template:'#register' 
}; 
// 2. 創建路由實例 
const router = new VueRouter({ 
 routes:[ 
  { path:'/user/:id', component:User }, 
  { path:'/register', component:Register } 
 ] 
}); 
//3. 創建和掛載根實例 
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基礎的示例分析”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注創新互聯行業資訊頻道！

當前標題：vue.js中Vue-router2.0基礎的示例分析
網址分享：http://www.yijiale78.com/article10/jdojgo.html

成都網站建設公司_創新互聯，為您提供關鍵詞優化、靜態網站、搜索引擎優化、服務器托管、網站改版、電子商務

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯