文档章节

(4)添加vue-router

neumeng
 neumeng
发布于 2018/10/18 10:20
字数 515
阅读 20
收藏 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
粉丝 9
博文 31
码字总数 14691
作品 0
鞍山
程序员
私信 提问
07、手把手教Vue--路由「Vue-rouer」

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

TigerChain
2018/09/27
0
0
vue.js之使用Vue CLI开发多页面应用

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

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

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

DIVI
2018/10/19
0
0
Vue中路由管理器Vue Router使用介绍(三)

一、路由定义添加动态参数定义 1.路由定义项,使用:xx 方式 定义动态参数 在js中使用: 二、路由链接使用 1.使用router-link 定义跳转链接 2.使用js跳转 更多示例: 更多: Vue中路由管理器V...

tianma3798
2018/10/17
0
0
Vuebnb:一个用vue.js和Laravel构建的全栈应用

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

笔阁
2018/04/16
0
0

没有更多内容

加载失败,请刷新页面

加载更多

漏洞防御与修复工作

漏洞管理工作是企业安全建设必不可少的一环,在风险管理工作中,漏洞管理能够防患于未然,企业对漏洞管理有着广泛的基础建设和实践经验。但随着攻防技术的发展,传统漏洞管理的安全技术和管理...

linuxprobe16
8分钟前
0
0
MicroPython技术及应用前景

1 Micropython技术是什么? MicroPython极精简高效的实现了Python3语言。它包含Python标准库的一小部分,能在单片机和受限环境中运行。 1.1 MicroPython发展 由剑桥大学的理论物理学家乔治....

bodasisiter
14分钟前
0
0
跟我学Spring Cloud(Finchley版)-13-通用方式使用Hystrix

本节详细讲解使用Hystrix的通用方式。 简介 Hystrix是由Netflix开源的一个延迟和容错库,用于隔离访问远程系统、服务或者第三方库,防止级联失败,从而提升系统的可用性与容错性。Hystrix主要...

周立_ITMuch
22分钟前
0
0
🛠️Hanjst/汉吉斯特更新加JavaScript运行时优化等

这是 Hanjst/汉吉斯特 发布以来的首个主要升级更新版本。这次的主要升级更新的内容包括移除HTML Comments注释行, 优化在 Hanjst include模板文件时的JavaScript运行时环境。 Hanjst 在设计和...

wadelau
今天
2
0
OSChina 周六乱弹 —— 舔狗是没有好下场的

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @我没有抓狂 :#今天听什么# #今天听这个# 分享 Nirvana 的歌曲《Smells Like Teen Spi...》 《Smells Like Teen Spi...》- Nirvana 手机党少...

小小编辑
今天
438
13

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部