美文网首页
Vue实战3-路由

Vue实战3-路由

作者: danejahn | 来源:发表于2017-05-17 19:20 被阅读911次

    组件间跳转

    在上次实现了我们的第一个页面之后,我们现在用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-路由

          本文链接:https://www.haomeiwen.com/subject/zusdxxtx.html