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

vue

  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 几种方式对比 (转载) 的全部内容, 来源链接: utcz.com/z/376573.html

回到顶部