vue-router+iview（简单例子）

根据上面我们已经建立好的工程项目，我们来加入路由等方法。

首先修改我们的HelloWorld.vue，加入iview的Layout组件

第二步，建立两个我们对应路由的文件

<style scoped>

.layout{

    border: 1px solid #d7dde4;

    background: #f5f7f9;

    position: relative;

    border-radius: 4px;

    overflow: hidden;

}

.layout-logo{

    width: 100px;

    height: 30px;

    background: #5b6270;

    border-radius: 3px;

    float: left;

    position: relative;

    top: 15px;

    left: 20px;

}

.layout-nav{

    width: 420px;

    margin: 0 auto;

    margin-right: 20px;

}

</style>

<template>

    <div class="layout">

        <Layout>

            <Header>

                <Menu mode="horizontal" theme="dark" active-name="1">

                    <div class="layout-logo"></div>

                    <div class="layout-nav">

                        <MenuItem name="1">

                            <Icon type="ios-navigate"></Icon>

                            Item 1

                        </MenuItem>

                        <MenuItem name="2">

                            <Icon type="ios-keypad"></Icon>

                            Item 2

                        </MenuItem>

                        <MenuItem name="3">

                            <Icon type="ios-analytics"></Icon>

                            Item 3

                        </MenuItem>

                        <MenuItem name="4">

                            <Icon type="ios-paper"></Icon>

                            Item 4

                        </MenuItem>

                    </div>

                </Menu>

            </Header>

            <Layout>

                <Sider hide-trigger :style="{background: '#fff'}">

                    <Menu active-name="1-2" theme="light" width="auto" :open-names="['1']">

                        <Submenu name="1">

                            <template slot="title">

                                <Icon type="ios-navigate"></Icon>

                                Item 1

                            </template>

                            <!-- 路由渲染部分 -->

                            <MenuItem name="1-1">

                              <router-link to="/">Home</router-link>

                            </MenuItem>

                            <MenuItem name="1-2">

                              <router-link to="/">About</router-link>

                            </MenuItem>

                            <MenuItem name="1-3">Option 3</MenuItem>

                        </Submenu>

                        <Submenu name="2">

                            <template slot="title">

                                <Icon type="ios-keypad"></Icon>

                                Item 2

                            </template>

                            <MenuItem name="2-1">Option 1</MenuItem>

                            <MenuItem name="2-2">Option 2</MenuItem>

                        </Submenu>

                        <Submenu name="3">

                            <template slot="title">

                                <Icon type="ios-analytics"></Icon>

                                Item 3

                            </template>

                            <MenuItem name="3-1">Option 1</MenuItem>

                            <MenuItem name="3-2">Option 2</MenuItem>

                        </Submenu>

                    </Menu>

                </Sider>

                <Layout :style="{padding: '0 24px 24px'}">

                    <Breadcrumb :style="{margin: '24px 0'}">

                        <BreadcrumbItem>Home</BreadcrumbItem>

                        <BreadcrumbItem>Components</BreadcrumbItem>

                        <BreadcrumbItem>Layout</BreadcrumbItem>

                    </Breadcrumb>

                    <Content :style="{padding: '24px', minHeight: '280px', background: '#fff',height:'800px'}">

                        <!-- 添加 -->

                        <router-view>

                          <!-- 内容渲染在这里 -->

                        </router-view>

                    </Content>

                </Layout>

            </Layout>

        </Layout>

    </div>

</template>

<script>

  //导入组件

  import Home from './Home'

  import About from './About'

    export default {

    }

</script>

//Home.vue

<template>

    <div class="home">

        <img src="../assets/logo.png" alt="Vue logo">

        <h1>home页面的</h1>

        <h5>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam, doloribus cupiditate nobis consectetur veniam magni tenetur exercitationem molestias voluptate harum, ex neque, alias nesciunt accusantium quia illum! Rem, quam incidunt?</h5>

    </div>

</template>

//About.vue

<template>

    <div class="companey">

        <div class="componeny-detail">

            <h1>this is an about Page </h1>

        </div>

    </div>

</template>

我们接下来在路由中渲染

//router.js

import Vue from 'vue'

import Router from 'vue-router'

import HelloWorld from '@/components/HelloWorld'

import Home from '@/components/Home'

import About from '@/components/About'

Vue.use(Router)

export default new Router({

  routes: [

    {

      path:'/',

      name:'home',//这里可不是HelloWorld哦，我们会把HelloWorld组件放入vue中

      component:Home

    },

    {

      path:'/',

      name:'about',

     component:About

    }

  ]

})

//app.vue

<template>![](https://img2018.cnblogs.com/blog/1037363/201906/1037363-20190626152134613-444927759.gif)

  <div id="app">

   <HelloWorld />

  </div>

</template>

<script>

import HelloWorld from './components/HelloWorld'

export default {

  components:{// 注册组件

    HelloWorld

  }

}

</script>

<style>

#app {

  font-family: 'Avenir', Helvetica, Arial, sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-align: center;

  color: #2c3e50;

}

</style>

我们给路由添加参数

import Vue from 'vue'

import Router from 'vue-router'

import HelloWorld from '@/components/HelloWorld'

import Home from '@/components/Home'

import About from '@/components/About'

Vue.use(Router)

export default new Router({

  routes: [

    {

      path:'/:author',

      name:'home',//这里可不是HelloWorld哦，我们会把HelloWorld组件放入vue中

      component:Home

    },

    {

      path:'/about/:id',

      name:'about',

     component:About

    }

  ]

})

在跳转路由中对应添加参数，并且还可以在页面显示

巴特西

vue-router+iview（简单例子）

最新文章

热门文章