码迷，mamicode.com
首页 > 其他好文 > 详细

vue router 几种方式对比 (转载)

时间：2017-10-26 15:24:53      阅读：404      评论：0      收藏：0      [点我收藏+]

标签：title   -name   其他   link   信息   组件   ons   tools   attr   

  1. <div id="app">  
  2.     <h1>Hello App!</h1>  
  3.     <p>  
  4.         <!-- 使用 router-link 组件来导航. -->  
  5.         <!-- 通过传入 `to` 属性指定链接. -->  
  6.         <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->  
  7.         <router-link to="/foo">Go to Foo</router-link>  
  8.         <router-link to="/bar">Go to Bar</router-link>  
  9.     </p>  
  10.     <!-- 路由出口 -->  
  11.     <!-- 路由匹配到的组件将渲染在这里 -->  
  12.     <router-view></router-view>  
  13. </div>  
  14.   
  15. <template id=‘foo‘>  
  16.     <p>this is foo!</p>  
  17. </template>  
  18. <template id=‘bar‘>  
  19.     <p>this is bar!</p>  
  20. </template>  
[javascript] view plain copy
 
  1. // 1. 定义（路由）组件。  
  2. // 可以从其他文件 import 进来  
  3. const Foo = { template:‘#foo‘ };  
  4. const Bar = { template:‘#bar‘ };  
  5. // 2. 定义路由  
  6. // 每个路由应该映射一个组件。 其中"component" 可以是  
  7. // 通过 Vue.extend() 创建的组件构造器，  
  8. // 或者，只是一个组件配置对象。  
  9. const routes = [  
  10.     { path: ‘/foo‘, component: Foo },  
  11.     { path: ‘/bar‘, component: Bar }  
  12. ];  
  13. // 3. 创建 router 实例，然后传 `routes` 配置  
  14. // 你还可以传别的配置参数, 不过先这么简单着吧。  
  15. const router = new VueRouter({ routes:routes });  
  16. // 4. 创建和挂载根实例。  
  17. // 记得要通过 router 配置参数注入路由，  
  18. // 从而让整个应用都有路由功能  
  19. const app = new Vue({ router:router }).$mount(‘#app‘);  

2)动态路由匹配：

 

 

[html] view plain copy
 
  1. <div id="app">  
  2.     <h1>Hello App!</h1>  
  3.     <p>  
  4.         <router-link to="/user/foo/post/123">Go to Foo</router-link>  
  5.         <router-link to="/user/bar/post/456">Go to Bar</router-link>  
  6.     </p>  
  7.     <router-view></router-view>  
  8. </div>  
  9.   
  10. <template id=‘user‘>  
  11.     <p>User:{{ $route.params.id }},Post:{{$route.params.post_id}}</p>  
  12. </template>  
[javascript] view plain copy
 
  1. // 1. 定义组件。  
  2. const User = {  
  3.     template:‘#user‘,  
  4.     watch:{  
  5.         ‘$route‘(to,from){  
  6.             console.log(‘从‘+from.params.id+‘到‘+to.params.id);  
  7.         }  
  8.     }  
  9. };  
  10. // 2. 创建路由实例 (可设置多段路径参数)  
  11. const router = new VueRouter({  
  12.     routes:[  
  13.         { path:‘/user/:id/post/:post_id‘,component:User }  
  14.     ]  
  15. });  
  16. //3. 创建和挂载根实例  
  17. const app = new Vue({ router:router }).$mount(‘#app‘);  

3)嵌套路由：

 

 

[html] view plain copy
 
  1. <div id="app">  
  2.     <h1>Hello App!</h1>  
  3.     <p>  
  4.         <router-link to="/user/foo">Go to Foo</router-link>  
  5.         <router-link to="/user/foo/profile">Go to profile</router-link>  
  6.         <router-link to="/user/foo/posts">Go to posts</router-link>  
  7.     </p>  
  8.     <router-view></router-view>  
  9. </div>  
  10.   
  11. <template id=‘user‘>  
  12.     <div>  
  13.         <h2>User:{{ $route.params.id }}</h2>  
  14.         <router-view></router-view>  
  15.     </div>  
  16. </template>  
  17.   
  18. <template id="userHome">  
  19.     <p>主页</p>  
  20. </template>  
  21.   
  22. <template id="userProfile">  
  23.     <p>概况</p>  
  24. </template>  
  25.   
  26. <template id="userPosts">  
  27.     <p>登录信息</p>  
  28. </template>  
[javascript] view plain copy
 
  1. // 1. 定义组件。  
  2. const User = {  
  3.     template:‘#user‘  
  4. };  
  5. const UserHome = {  
  6.     template:‘#userHome‘  
  7. };  
  8. const UserProfile = {  
  9.     template:‘#userProfile‘  
  10. };  
  11. const UserPosts = {  
  12.     template:‘#userPosts‘  
  13. };  
  14. // 2. 创建路由实例  
  15. const router = new VueRouter({  
  16.     routes:[  
  17.         { path:‘/user/:id‘, component:User,  
  18.             children:[  
  19.                 // 当 /user/:id 匹配成功，  
  20.                 // UserHome 会被渲染在 User 的 <router-view> 中  
  21.                 { path: ‘‘, component: UserHome},  
  22.                 // 当 /user/:id/profile 匹配成功，  
  23.                 // UserProfile 会被渲染在 User 的 <router-view> 中  
  24.                 { path:‘profile‘, component:UserProfile },  
  25.                 // 当 /user/:id/posts 匹配成功  
  26.                 // UserPosts 会被渲染在 User 的 <router-view> 中  
  27.                 { path: ‘posts‘, component: UserPosts }  
  28.             ]  
  29.         }  
  30.     ]  
  31. });  
  32. //3. 创建和挂载根实例  
  33. const app = new Vue({ router:router }).$mount(‘#app‘);  

4)编程式路由：

 

 

[html] view plain copy
 
  1. <div id="app">  
  2.     <h1>Hello App!</h1>  
  3.     <p>  
  4.         <router-link to="/user/foo">Go to Foo</router-link>  
  5.     </p>  
  6.     <router-view></router-view>  
  7. </div>  
  8.   
  9. <template id=‘user‘>  
  10.     <h2>User:{{ $route.params.id }}</h2>  
  11. </template>  
  12.   
  13. <template id="register">  
  14.     <p>注册</p>  
  15. </template>  
[javascript] view plain copy
 
  1. // 1. 定义组件。  
  2. const User = {  
  3.     template:‘#user‘  
  4. };  
  5. const Register = {  
  6.     template:‘#register‘  
  7. };  
  8. // 2. 创建路由实例  
  9. const router = new VueRouter({  
  10.     routes:[  
  11.         { path:‘/user/:id‘, component:User },  
  12.         { path:‘/register‘, component:Register }  
  13.     ]  
  14. });  
  15. //3. 创建和挂载根实例  
  16. const app = new Vue({ router:router }).$mount(‘#app‘);  
  17.   
  18. //4.router.push(location)  
  19. router.push({ path: ‘register‘, query: { plan: ‘private‘ }});  

 

5)命名路由：

[html] view plain copy
 
  1. <div id="app">  
  2.     <h1>Named Routes</h1>  
  3.     <p>Current route name: {{ $route.name }}</p>  
  4.     <ul>  
  5.         <li><router-link :to="{ name: ‘home‘ }">home</router-link></li>  
  6.         <li><router-link :to="{ name: ‘foo‘ }">foo</router-link></li>  
  7.         <li><router-link :to="{ name: ‘bar‘, params: { id: 123 }}">bar</router-link></li>  
  8.     </ul>  
  9.     <router-view class="view"></router-view>  
  10. </div>  
  11.   
  12. <template id=‘home‘>  
  13.     <div>This is Home</div>  
  14. </template>  
  15.   
  16. <template id=‘foo‘>  
  17.     <div>This is Foo</div>  
  18. </template>  
  19.   
  20. <template id=‘bar‘>  
  21.     <div>This is Bar {{ $route.params.id }}</div>  
  22. </template>  
[javascript] view plain copy
 
  1. const Home = { template: ‘#home‘ };  
  2. const Foo = { template: ‘#foo‘ };  
  3. const Bar = { template: ‘#bar‘ };  
  4.   
  5. const router = new VueRouter({  
  6.     routes: [  
  7.         { path: ‘/‘, name: ‘home‘, component: Home },  
  8.         { path: ‘/foo‘, name: ‘foo‘, component: Foo },  
  9.         { path: ‘/bar/:id‘, name: ‘bar‘, component: Bar }  
  10.     ]  
  11. });  
  12.   
  13. new Vue({ router:router }).$mount(‘#app‘);  

6)命名视图：

 

[html] view plain copy
 
  1. <div id="app">  
  2.     <router-link to="/">Go to Foo</router-link>  
  3.     <router-view class="view one"></router-view>  
  4.     <router-view class="view two" name="a"></router-view>  
  5.     <router-view class="view three" name="b"></router-view>  
  6. </div>  
  7.   
  8. <template id=‘foo‘>  
  9.     <div>This is Foo</div>  
  10. </template>  
  11.   
  12. <template id=‘bar‘>  
  13.     <div>This is Bar {{ $route.params.id }}</div>  
  14. </template>  
  15.   
  16. <template id=‘baz‘>  
  17.     <div>This is baz</div>  
  18. </template>  
[javascript] view plain copy
 
  1. const Foo = { template: ‘#foo‘ };  
  2. const Bar = { template: ‘#bar‘ };  
  3. const Baz = { template: ‘#baz‘ };  
  4.   
  5. const router = new VueRouter({  
  6.     routes: [  
  7.         {  
  8.             path: ‘/‘,  
  9.             components: {  
  10.                 default:Foo,  
  11.                 a:Bar,  
  12.                 b:Baz  
  13.             }  
  14.         }  
  15.     ]  
  16. });  
  17.   
  18. new Vue({ router:router }).$mount(‘#app‘);  

 

vue router 几种方式对比 (转载)

标签：title   -name   其他   link   信息   组件   ons   tools   attr   

原文地址：http://www.cnblogs.com/daiwenru/p/7736480.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！