文档章节

(4)添加vue-router

neumeng
 neumeng
发布于 10/18 10:20
字数 515
阅读 8
收藏 0

(4)添加vue-router

1 安装vue-router

cnpm install vue-router --save

2 页面准备

新建目录/src/views/common,此目录下面建立4个组件404.vuehome.vuelogin.vuetheme.vue。每个文件只有表示该文件的一个题目,如theme.vue为:

<template>
  <div>
    <h1>theme</h1>
  </div>
</template>
<script>
export default {
}
</script>

3 路由配置

新建文件/src/router/index.js,内容如下:

/**
 * 全站路由配置
 *
 * 建议:
 * 1. 代码中路由统一使用name属性跳转(不使用path属性)
 */
import Vue from 'vue'
import Router from 'vue-router'

// 全局路由(无需嵌套上左右整体布局)
const globalRoutes=[
  {
    path:'/404',
    component:require('@/views/common/404.vue').default,
    name:'404',
    meta:{title:'404未找到'}
  },
  {
    path:'/login',
    component:require('@/views/common/login.vue').default,
    name:'login',
    meta:{title:'登录'}
  }
]
// 主入口路由(需嵌套上左右整体布局)
const mainRoutes={
  path:'/',
  component:require('@/views/main.vue').default,
  name:'main',
  redirect:{name:'home'},
  meta:{title:'主入口整体布局'},
  children:[
    {
      path:'/home',
      component:require('@/views/common/home.vue').default,
      name:'home',
      meta:{title:'首页'}
    },
    {
      path:'/theme',
      component:require('@/views/common/theme.vue').default,
      name:'theme',
      meta:{title:'主题'}
    }
  ]
}

Vue.use(Router)
const router = new Router({
  mode:'hash',
  routes:globalRoutes.concat(mainRoutes)
})
export default router

所涉及到的内容,在vue-router的文档中都能查到。

4 界面修改

4.1 App.vue修改

整站就是一个路由,很魔性。

<template>
    <transition name="fade">
      <router-view></router-view>
    </transition>  
</template>
<script>
export default {
}
</script>

根据路由配置,这个App.vue组件,只显示三个界面,分别是/404/login/。 其中/这个路由下(显示的是main.vue),还有子路由(所以main.vue里面还有router-view)。在正常登录后,显示的就是子路由的内容。

4.2 main.vue主界面

新建/src/views/main.vue。 主要修改内容是,顶部为nav标签,左侧是aside标签,内容部分是main标签,这些是html5语义标签。

5 main.js修改

引入vue-router:

import Vue from 'vue'
import App from './App'
//引入vue-router
import router from '@/router'
import '@/assets/scss/index.scss'
Vue.config.productionTip = false
// 使用router
Vue.use(router)

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

© 著作权归作者所有

共有 人打赏支持
上一篇: (5)添加svg支持
下一篇: (3)添加sass
neumeng
粉丝 10
博文 29
码字总数 13517
作品 0
鞍山
程序员
私信 提问
vue.js之使用Vue CLI开发多页面应用

简要说明 Vue CLI是一个基于Vue.js进行快速开发的完整系统,是vue-cli的升级版,除含有快速搭建Vue项目的脚手架外还有许多实用功能,vue ui是个亮点,官方详细文档传送门。 一、安装Vue CLI...

louieSun
10/09
0
0
vue番外篇 -- vue-router浅析原理

近期被问到一个问题,在你们项目中使用的是Vue的SPA(单页面)还是Vue的多页面设计? 这篇文章主要围绕Vue的SPA单页面设计展开。 关于如何展开Vue多页面设计请点击查看。 vue-router是什么?...

DIVI
10/19
0
0
07、手把手教Vue--路由「Vue-rouer」

PS:转载请注明出处 作者: TigerChain 地址: https://www.jianshu.com/p/443c6704d8d8 本文出自 TigerChain 简书 手把手教 Vue 系列 教程简介 1、阅读对象 本篇教程适合新手阅读,老手直接略...

TigerChain
09/27
0
0
Vuebnb:一个用vue.js和Laravel构建的全栈应用

今年我一直在写一本新书叫全栈Vue网站开发:Vue.js,Vuex和Laravel。它会在Packt出版社在2018年初出版。 这本书是围绕着一个案例研究项目,Vuebnb,简单克隆Airbnb。在这篇文章中,我会把它如...

笔阁
04/16
0
0
Vue template compiler 的问题

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler......

粒子数反转
10/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周二乱弹 —— 哥们之间报恩的想法被上帝实现了

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 小小编辑:推荐歌曲《消愁》 《消愁》- 毛不易 手机党少年们想听歌,请使劲儿戳(这里) @过遥 :周一的早上就应该用来补觉,太困了 周末不想...

小小编辑
9分钟前
8
1
MariaDB 服务器在 MySQL Workbench 备份数据的时候出错如何解决

服务器是运行在 MariaDB 10.2 上面的,在使用 MySQL Workbench 出现错误: mysqldump: Couldn't execute 'SELECT COLUMN_NAME, JSON_EXTRACT(HISTOGRAM, '$."number-of-buckets-specified"'......

honeymose
今天
3
0
apache顶级项目(二) - B~C

apache顶级项目(二) - B~C https://www.apache.org/ Bahir Apache Bahir provides extensions to multiple distributed analytic platforms, extending their reach with a diversity of s......

晨猫
今天
7
0
day152-2018-11-19-英语流利阅读

“超级食物”竟然是营销噱头? Daniel 2018-11-19 1.今日导读 近几年来,超级食物 superfoods 开始逐渐走红。不难发现,越来越多的轻食餐厅也在不断推出以超级食物为主打食材的健康料理,像是...

飞鱼说编程
今天
18
1
SpringBoot源码:启动过程分析(二)

接着上篇继续分析 SpringBoot 的启动过程。 SpringBoot的版本为:2.1.0 release,最新版本。 一.时序图 一样的,我们先把时序图贴上来,方便理解: 二.源码分析 回顾一下,前面我们分析到了下...

Jacktanger
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部