小QA学习前端系列之vue router

发表于

创建组件

首先引入vue.js和vue-router.js：

1
2
3
4
5
6
7
8
npm install vue-router --save
  "dependencies": {
    ...
    "vue-router": "^2.1.1"
    ...
  },
或者
  npm install vue-router --save-dev

然后创建两个组件构造器Home和About：
App.vue

1
2
3
4
5
6
7
8
9
10
<template>
  <div id="app">
    <router-link to="/">1</router-link>
    <router-link to="/2">2</router-link>
    <br/>
    <router-view></router-view>
  </div>
</template>

  1. 创建Router
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    import Vue from 'vue'
    import App from './App'
    import VueRouter from 'vue-router'
    import Page1 from './components/page1'
    import Page2 from './components/page2'
    var router = new VueRouter({
        routes
    })
    new Vue({
      el: '#app',
      template: '<App/>',
      components: { App },
      router
    })

调用构造器VueRouter，创建一个路由器实例router。

  1. 映射路由
    1
    2
    3
    4
    const routes = [
      { path: '/', component: Page1 },
      { path: '/2', component: Page2 },
    ]

page1.vue

1
2
3
4
5
6
<template>
  <div>
    <h1>page2</h1>
  </div>
</template>

page2.vue

1
2
3
4
5
<template>
  <div>
    <h1>page2</h1>
  </div>
</template>

实现步骤：

* npm安装vue-router
* Vue.use(VueRouter)全局安装路由功能
* 定义路径数组routes并创建路由对象router
* 将路由注入到Vue对象中
* 在根组件中使用<router-link>定义跳转路径
* 在根组件中使用<router-view>来渲染组件
* 创建子组件

路由的跳转

router-link标签用于页面的跳转

1
<router-link to="/page1">page1</router-link>

当点击这个router-link标签时 router-view就会渲染路径为/page1的页面。
注意：router-link默认是一个a标签的形式，如果需要显示不同的样子，可以在router-link标签中写入不同标签元素，如下显示为button按钮。

1
2
3
<router-link to="/04">
    <button>to04</button>
</router-link>

会被渲染为 标签， to 会被渲染为 href，当 被点击的时候，url 会发生相应的改变

如果使用 v-bind 指令，还可以在 to 后面接变量，配合 v-for 指令可以渲染导航菜单
如果对于所有 ID 各不相同的用户，都要使用 home 组件来渲染，可以在 routers.js 中添加动态参数：

{
path: ‘/home/:id’,
component: Home
}

这样 “/home/user01”、”/home/user02”、”/home/user03” 等路由，都会映射到 Home 组件

然后还可以使用 $route.params.id 来获取到对应的 id

动态路由匹配

1
2
3
4
5
6
7
8
9
10
11
12
<div id="app">  
    <h1>Hello App!</h1>  
    <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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 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');

编程式导航 router.push

也可以通过JS代码控制路由的界面渲染，方法如下：

1
2
3
4
5
6
7
8
// 字符串
router.push('home')
// 对象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})
// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

实际情况下，有很多按钮在执行跳转之前，还会执行一系列方法，这时可以使用 this.$router.push(location) 来修改 url，完成跳转

1
2
3
4
<div>
<button>
</button class="登录" @click="go"> </button>
</div>

1
2
3
4
5
6
7
8
new Vue({
  el: '#app',
 method: {
     go:()=>{
         this.$router.push({path:"/home/test"})
     }
 }
})

嵌套路由

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<div id="app">  
    <h1>Hello App!</h1>  
    <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>  
        <h2>User:{{ $route.params.id }}</h2>  
        <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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
/ 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');