組件間跳轉(zhuǎn)

在上次實(shí)現(xiàn)了我們的第一個(gè)頁(yè)面之后虑灰，我們現(xiàn)在用router實(shí)現(xiàn)頁(yè)面間的跳轉(zhuǎn)碴倾。
參考基于 Webpack & Vue & Vue-Router 的 SPA 初體驗(yàn)

首先我們?cè)黾右粋€(gè)簡(jiǎn)單的組件About.vue

About.vue

寫一個(gè)簡(jiǎn)單的組件。

<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組件可以在具有路由功能的應(yīng)用中導(dǎo)航，它會(huì)被渲染成a標(biāo)簽镶奉。router-link介紹

嵌套路由

我們?cè)趯?shí)際的開(kāi)發(fā)中础淤，頁(yè)面通常都是由多層嵌套的組件組合而成的崭放。
我們舉個(gè)例子，Login頁(yè)面進(jìn)到Main頁(yè)面后鸽凶，Main頁(yè)面有兩個(gè)子組件币砂，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>

點(diǎn)擊登錄后玻侥，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來(lái)配置main的嵌套路由凑兰，我們可以按著這個(gè)路子嵌套多層路由掌桩。