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

Posted 2020-10-12 改变

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‘);