vue入门

初始化项目目录结构

• components文件夹中存放的都是组件
• route中存放的index.js是做路由控制的。
  在components下面的HelloWorld.vue就是默认的页面。

新建一个vue页面

在component目录下新建一个first.vue文件，内容如下：

<template>
    <div>
        first.vue
    </div>
</template>
<script>
</script>
<style>
</style>

修改路由

在route目录下，修改index.js，首先引入我们刚才创建的文件import First from '@/components/First'，在修改内容：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import First from '@/components/First'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'First',
      component: First
    }
  ]
})

component: First来自于import First from '@/components/First'中的First
浏览其中显示：

说明成功

在首页实现页面跳转

修改first.vue，内容如下：

<template>
    <div>
        <router-link to="/a">跳转A页面</router-link>
        <router-link to="/b">跳转B页面</router-link>
    </div>
</template>
<script>

</script>
<style>

</style>

我们在components文件夹中新建文件A.vue，内容如下：

<template>
    <div>
        这时A页面...
        <router-link to="/">返回</router-link>
    </div>
</template>

同理B.vue一样。
然后修改index.js，文件内容如下：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import First from '@/components/First'
import A from '@/components/A'
import B from '@/components/B'


Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'First',
      component: First
    },
    {
      path: '/a',
      component: A
    },
    {
      path: '/b',
      component: B
    }
  ]
})

path: '/a'来自于A.vue中的<router-link to="/a">
这样就可以实现页面跳转了。

route实现子路由

在components目录下新建文件A1.vue，内容如下：

<template>
    <div>
        <p>我是A1</p>
        <p><router-link to="/a">返回上一级</router-link></p>
        <p><router-link to="/">返回首页</router-link></p>
    </div>
</template>

然后注册路由，修改index.js，文件内容如下：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import First from '@/components/First'
import A from '@/components/A'
import B from '@/components/B'
import A1 from '@/components/A1'


Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'First',
      component: First
    },
    {
      path: '/a',
      component: A,
      children: [
        {
          path: '/a1',
          component: A1
        }
      ]
    },
    {
      path: '/b',
      component: B
    }
    
  ]
})

这样就将子路由注册成功了，然后修改A.vue，内容如下：

<template>
    <div>
        这时A页面...
        <router-link to="/a1">转向A1</router-link>
        <router-link to="/">返回</router-link>
    </div>
</template>

仅仅这样写是无法跳转到A1页面的，因为没有加载子路由，因此需要挂在子路由，内容如下：

<template>
    <div>
        这时A页面...
        <router-link to="/a1">转向A1</router-link>
        <router-link to="/">返回</router-link>
        <router-view></router-view>
    </div>
</template>

子路由的问题

目前的A1页面如下：

这页面将上父一级A页面也显示出来了，而不是覆盖上一级页面。
如何解决这个问题？
修改index.js，内容如下：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import First from '@/components/First'
import A from '@/components/A'
import B from '@/components/B'
import A1 from '@/components/A1'


Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'First',
      component: First
    },
    {
      path: '/a',
      component: A
    },
    {
      path: '/b',
      component: B
    },
    {
      path: '/a1',
      component: A1
    }
    
  ]
})

这样就不会覆盖了。

如何在任何页面中都显示“转向A页面 转向B页面”

也就是说说不管在任何页面，父级页面都显示，修改index.js内容如下：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import First from '@/components/First'
import A from '@/components/A'
import B from '@/components/B'
import A1 from '@/components/A1'


Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'First',
      component: First,
      children: [
        {
          path: '/a',
          component: A
        },
        {
          path: '/b',
          component: B
        },
        {
          path: '/a1',
          component: A1
        }
      ]
    }
  ]
})

然后需要在first.vue中添加<router-view></router-view>，内容如下：

<template>
    <div>
        <router-link to="/a">跳转A页面</router-link>
        <router-link to="/b">跳转B页面</router-link>
        <router-view></router-view>
    </div>
</template>
<script>

</script>
<style>

</style>