美文网首页
Vue路由和路由嵌套

Vue路由和路由嵌套

作者: 凌康ACG | 来源:发表于2019-08-17 18:05 被阅读0次

效果图如下:


GIF.gif

1、创建好项目环境

可参考上篇https://www.jianshu.com/p/98fb7f0a45b7

修改配置main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  router,
  template: '<App/>'
})

加入了路由install一下:
npm install --save vue-router

修改App.vue:

<template>
  <div id="app">
    <!--首页路由-->
    <router-view/>
  </div>
</template>

<script>
  import main from './views/main'

  export default {
    name: 'App',
    components: {
      main
    }
  }
</script>

<style>

</style>

2、创建视图和模板

创建src/views文件夹,在views下创建main.vue、page1.vue、page2.vue

main.vue:

<template>
  <div>
    <div style="float: left;width: 250px;height: 400px;border-right: 2px solid red;">
      左边内容:
      <br><br>
      <router-link to="/page1">page1</router-link>
      <br><br>
      <router-link to="/page2">page2</router-link>
    </div>
    <div style="float: left;width: 400px;height: 400px;margin-left: 10px;">
      右边内容:<br>
      <!--在这里路由页面-->
      <router-view/>
    </div>
  </div>
</template>

<script>
  export default {
    name: "main"
  }
</script>

<style scoped>

</style>

page1.vue:

<template>
  <div>
    page1内容
  </div>
</template>

<script>
  export default {
    name: "page1"
  }
</script>

<style scoped>

</style>

page2.vue:

<template>
  <div>
    page2内容,page2!
  </div>
</template>

<script>
  export default {
    name: "page1"
  }
</script>

<style scoped>

</style>

3、在src下创建router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import main from '@/views/main'

Vue.use(Router)

export default new Router({
  routes: [
    {
      //主页
      path: '/',
      name: 'main',
      component: main,
      children: [
        {
          path: '/page1',
          name: 'page1',
          component: () => import('../views/page1')
        }, {
          path: '/page2',
          name: 'page2',
          component: () => import('../views/page2')
        }
      ]
    }
  ]
})

项目代码:gitee码云
项目目录:

image.png

相关文章

  • vue路由

    路由:vue-router 案例: 1.路由 2.路由的嵌套

  • vue中的路由

    vue中4中路由包含: 1、动态路由2、嵌套路由3、编程式路由4、命名式路由 1、动态路由 2、嵌套路由 3、编程...

  • vue嵌套路由与404重定向实现方法分析

    第一部分: vue嵌套路由 嵌套路由是什么? 嵌套路由就是在一个被路由过来的页面下可以继续使用路由,嵌套也就是路由...

  • 6 VUE路由

    vue-> SPA应用,单页面应用(引入vue-router.js) 路由嵌套(多层路由): 路由其他信息:

  • vue-router

    前端路由的基本原理 vue-router的基本使用 命名路由 路由参数 嵌套路由

  • Vue-基础-05-重点

    Vue-基础-day05-重点 01-基础-路由-vue-router-嵌套路由 children用法和route...

  • Vue路由和路由嵌套

    效果图如下: 1、创建好项目环境 可参考上篇https://www.jianshu.com/p/98fb7f0a4...

  • 手写 Vue Router、手写响应式实现、虚拟 DOM 和 D

    Vue-Router 原理实现 一、Vue-Router 动态路由 二、Vue-Router 嵌套路由 三、Vue...

  • vue 第八章

    路由1.路由下载用gitnpm install vuenpm install vue-router 2.路由嵌套嵌...

  • 前端理论面试-router+axios

    Vue Router Vue Router 是 Vue.js 官方的路由管理器。 包含的功能有: 嵌套的路由/视图...

网友评论

      本文标题:Vue路由和路由嵌套

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