首页 > 其他 > 详细

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

时间：2017-10-26 14:25:55      阅读：340      评论：0      收藏：0      [点我收藏+]
  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 几种方式对比 (转载)

原文：http://www.cnblogs.com/daiwenru/p/7736480.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
分享档案
更多>
2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)
最新文章
更多>
教程昨日排行
更多>
友情链接
汇智网   PHP教程   插件网  
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣，分享程序人生！