Vue实战3-路由

组件间跳转

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

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

About.vue

写一个简单的组件。

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

在之前的App.vue加入了

    

      Hello
      About
    

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

嵌套路由

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

image.png

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

Login.vue

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

Main.vue

我们可以看到在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的嵌套路由，我们可以按着这个路子嵌套多层路由。