组件间跳转

在上次实现了我们的第一个页面之后，我们现在用router实现页面间的跳转。
参考基于 Webpack & Vue & Vue-Router 的 SPA 初体验

首先我们增加一个简单的组件About.vue

About.vue

写一个简单的组件。

<template>
    <div>
        <h1>About me</h1>
        <br>
        <h2>{{msg}}</h2>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                msg: 'I am a full stack developer!'
            }
        }
    }
</script>

router

把之前的router改写一下，加入about的路由。

    routes: [
    {
        path: '/',
        component: require('../components/Hello')
    },
     {
        path: '/hello',
        name: 'Hello',
        component: require('../components/Hello')
    },
    {
        path: '/about',
        name: 'About',
        component: require('../components/About')
    }]

App.vue

<template>
  <div id="app">
    ![](./assets/logo.png)
    <div id="menu">
      <router-link to="/hello">Hello</router-link>
      <router-link to="/about">About</router-link>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style>
##app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

在之前的App.vue加入了

    <div id="menu">
      <router-link to="/hello">Hello</router-link>
      <router-link to="/about">About</router-link>
    </div>

router-link组件可以在具有路由功能的应用中导航，它会被渲染成a标签。router-link介绍

嵌套路由

我们在实际的开发中，页面通常都是由多层嵌套的组件组合而成的。
我们举个例子，Login页面进到Main页面后，Main页面有两个子组件，Hello和About。

image.png

我们需要在components中添加Login和Main

Login.vue

<template>
    <div>
        <div>
            <input v-model="username" placeholder="用户名">
        </div>
        <div>
            <input v-model="password" placeholder="密码">
        </div>
        <button v-on:click="login">登录</button>
    </div>
</template>
<script>
    import router from '../router'

    export default {
        name:'login',
        data:function(){
            return {
                username:'',
                password:''
            }
        },
        methods:{
            login:function(){
                router.push({path:'/main'});
            }
        }
    }
</script>

点击登录后，router路由到/main。

Main.vue

<template>
    <div>
        ![](../assets/logo.png)
        <div id="menu">
          <router-link to="/main/hello">Hello</router-link>
          <router-link to="/main/about">About</router-link>
        </div>
        <router-view></router-view> 
    </div>
</template>

<script>
    export default{
        name:'main'
    }
</script>

我们可以看到在Main的模板中添加了router-view。

route

在路由文件index.js中

routes: [{
        path: '/',
        component: require('../components/Login')
    }, {
        path: '/main',
        component: require('../components/Main'),
        children: [{
            path: 'hello',
            component: require('../components/Hello')
        }, {
            path: 'about',
            component: require('../components/About')
        }]
    }]

用children来配置main的嵌套路由，我们可以按着这个路子嵌套多层路由。

Vue实战3-路由