在静态页面中使用,router构建单页应用

时间: 2019-08-13阅读: 170标签: 静态

  • Vue2轻巧入门
  • Vue.js再入门
  • Vue.js使用vue-router创设单页应用
  • Vue.js状态管理工科具Vuex快捷上手

github代码同步网站

不行使Node.js,NPM,Webpack等, 在静态页中使用Vue.js. 包含路由, 单文件组件.

观念的网页应用

零零件 (ComponentState of Qatar 是 Vue.js 最刚劲的效果之风华正茂。组件可以扩充 HTML 成分,封装可选择的代码。在较高层面上,组件是自定义成分,Vue.js 的编译器为它助长特殊意义。

  1. 创建index.html

单页应用

组件是vue中相当重大的八个定义,网页构造的三结合都要凭仗组件,页面包车型地铁某部组成都部队分都才干够写成三个组件,然后在其余的页面中调用该器件,组件常常都写在components文件夹中。上面举一些现实的例证进行详细呈报:

1、网页首先步入index.html入口文件,当dom渲染到<div id="app"></div>某个的时候,vue私下认可机制就跳转到src文件夹中main.js文件,在main.js里面搜索到一个大局组件App.vue,进而跳转到App.vue中张开dom渲染

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

2、组件都写在<template>标签内,当dom渲染到<router-view/>时,就活动跳转到router中的index.js路由文件中,路由文件定义相应的url步向相应的零零器件,路由的定义分上面4步
router中的index.js文件

import Vue from 'vue'![微信截图_20180314103850.png](https://upload-images.jianshu.io/upload_images/3810529-fe7323678a38f5a8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

import Router from 'vue-router'
//1、 定义组件,从其他文件import进来
import layout from '../components/layout'

Vue.use(Router)

//2、定义路由对象,每个路由应该映射一个组件
const routes =[
  {
    path:'/',
    component:layout
  }
]

//3、创建 router 实例,然后转 `routes` 配置
const router = new Router({
  mode: 'history',
  routes
})

//4、创建和挂载路由,从而让整个应用都有路由功能
export default router

PS:第三步中的mode:'history'是为了去除url中的"#"


3、编写layout.vue组件,这里推荐应用一个前端框架,element-Ul是饿了么前端团队推出的大器晚成款基于Vue.js 2.0 的桌面端UI框架

  • 设置(推荐使用npm的法子安装,它能更加好的和webpack打包工具合营使用)
    cnpm install --seve element-ui
    增进--save命令,在package.json里就能够自行踏向,下一次拉取项目向来install就足以平昔设置
    图片 1图片 2
  • 引进element-ui(element-ui能够完全引进,也得以按需引进,),为了完结收缩项目体量的指标,提议按需引进,譬喻要用element-ui中的菜单组件,就在main.js文件中:
import {
  Menu,
  MenuItem,
} from 'element-ui'
Vue.use(Menu)
Vue.use(MenuItem)
  • 编写layout文件,以管窥天,layout能够视作二个搭架子文件,在漫天layout里面会有标题、菜单等子组件,为了使组织特别鲜明,能够将标题栏、菜单等一些都写成组件的花样,然后在layout中调用
<template>
  <div>
    <side-bar></side-bar>
  </div>
</template>
<script>
import sideBar from "./wigdets/side-bar.vue";
export default {
  components: {
    sideBar
  }
}
</script>

4、编写side-bar.vue组件

  • element-ui的机件语法都足以在官方网站络找到相应的例证,只要依照官方网站的事例实行编写制定就足以了
    PS:样式文件安装sass语法cnpm install sass-loader node-sass --save-dev设置那多少个依附包之后就能够用sass语法写样式文件,这种语法的受益是能够定义变量,方便在后边的体制订义能够制止编写制定重复的变量
    图片 3
<template>
  <div id="navBar">
    <el-menu  class="el-menu-vertical-demo" text-color="#fff" unique-opened router>
      <el-menu-item index="1-1">
        User
      </el-menu-item>
      <el-menu-item index="1-2">
        Service
      </el-menu-item>
      <el-menu-item index="1-3">
        Source
      </el-menu-item>
      <el-menu-item index="1-4">
        App
      </el-menu-item>
      <el-menu-item index="1-5">
        Key
      </el-menu-item>
    </el-menu>
  </div>
</template>
<style lang="scss" scoped>
  $sideWidth: 260px;
  #navBar {
    z-index: 2;
    width: $sideWidth;
    height: 100%;
    background: #3E3E3E;
    flex-shrink: 0;
    color:#B8B8B8;
    span{
      color:#B8B8B8;
    }
    i {
      font-size: 20px !important;
      padding: 0 10px 0 40px;
      display: inline-block;
      width: 75px;
      color:#B8B8B8;
    }
  }
  $menuHeight:70px;
  .el-menu{
    border-right: 0;
    background: #3E3E3E;
  }
  .el-menu-item{
    height: $menuHeight;
    line-height: $menuHeight;
    font-size: 16px;
    border-bottom: 1px solid rgba(107, 108, 109, 0.19);
    padding: 0 10px;
  }
  #navBar .el-menu-item:hover{
    background: #575757 !important;
    cursor: pointer;
    span{
      color: #F36A5A;
    }
  }
  #navBar .el-menu-item.is-active{
    background: #f5f5f5 !important;
    span{
      color: #F36A5A;
    }
    i{
      color: #F36A5A;
    }
  }
</style>

图片 4

index.html做为项目标首页, 首要用以定义页面框架, 加载必须的css和script.这里运用element-ui的领航菜单组件搭建了贰个页面框架.

单页应用的利弊

每个本领都有其利弊,单页应用也是这般。

  • 无刷新体验,那么些理应是最刚烈的有一点,由于路由分发间接在浏览器端实现,页面是不刷新,对客商的响应特别及时,因而升高了客户体验;
  • 全盘的前端组件化,前端开垦不再以页面为单位,越来越多地运用组件化的考虑,代码结议和团体措施更是规范化,便于更改和调治;
  • API 共享,若是你的劳动是多端的(浏览器端、Android、iOS、Wechat等),单页应用的方式便于你在多个端共用 API,能够料定收缩服务端的专门的工作量。轻便生成的 UI 部分都曾经嵌入到了多端,只受到业务数据模型影响的 API,更便于牢固下来,便于提供鲁棒的服务;
  • 组件分享,在好几对性能体验必要不高的光景,或然产物处在火速试错阶段,依附于一些本领(Hybrid、React Native),能够在多端分享组件,便于产物的神速迭代,节约财富。

缺点:

  • 第一次加载大批量资源,要在二个页面上为客户提供付加物的保有机能,在此个页面加载的时候,首先要加载大批量的静态财富,那几个加载时间绝相比较较长;
  • 较高的前端开拓门槛,MVC 前置,对前面多个程序猿的渴求加强了,不再是『切切图,画画页面这么简单』;同不平时候专业量也会扩充好数倍,开垦那类应用前端技术员的数目往往多于后端;
  • 不利于 SEO,单页页面,数据在前端渲染,就表示未有SEO,可能供给运用变通的方案。

急需在意的是,el-menu标签要抬高:default-active="$route.path"和@select="handleSelect"; 有了那四个天性技术达成路由的跳转.

接受vue-router构建单页应用

vue-router.js是Vue.js官方的路由插件用于创设单页面应用。
vue的单页应用是依据路由和零器件的。古板的页面使用,是用某个超链接来贯彻页面切换和跳转的。在vue-router单面应用中,则是门路之间的切换,也正是组件的切换。

先来看一下法定提供的最简单易行的例证:示例
HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
    <h1>Hello App!</h1>
    <p>
        <!-- 使用 router-link 组件来导航. -->
        <!-- 通过传入 `to` 属性指定链接. -->
        <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
        <router-link to="/foo">Go to Foo</router-link>
        <router-link to="/bar">Go to Bar</router-link>
    </p>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
</div>
  • router-link标签:跳转的链接,to=""是必得的质量,双引号中的内容是大家接下去在JS文件中定义的路由path。
  • router-view标签:展现大家同盟到的构件的区域。

JavaScript

// 0. 如果使用模块化机制编程,导入Vue和VueRouter,要调用 Vue.use(VueRouter)

// 1. 定义(路由)组件。
// 也可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器,
// 或者,只是一个组件配置对象。
const routes = [
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar }
]

// 3. 创建 router 实例,然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
    routes // (缩写)相当于 routes: routes
})

// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由,
// 从而让整个应用都有路由功能
const app = new Vue({
    router
}).$mount('#app')

// 现在,应用已经启动了!

JavaScript文件重大做的事情是:

  • 定义路由列表,即routes。
  • 创建router实例及router配置,即router。
  • 创制和挂载根实例。

以上只是教大家用最简便的措施应用vue-router。但骨子里开荒进程中,首先我们的vue组件分明不会唯有三个template模板这么不难,会用到vue的单文件组件;
其次大家平常会愿意<router-view>的范围是任何页面,并不是像以后如此直白有多少个碍眼的导航存在于页面上,这就须要先定义好暗中认可状态下<router-view>展现的原委。

既然如此是单页应用(SPA),那么整个项目有以下多少个文本是少不了的:

  • 一个html文件:index.html
  • 一个webpack打包时的入口js文件:main.js
  • 叁个根vue组件,作为任何零零件的挂载点:app.vue

接下去 我们就创办五个自定义组件:index.vue和hello.vue。我们盼望的结果是他俩中间互相跳转。
咱俩采纳官方提供的脚手架vue-cli工具生成简单的多个依据webpack打包的vue项目
未雨希图干活:

npm install webpack -g
npm install vue-cli -g
//打开要创建的项目路径目录,创建项目
vue init webpack-simple <项目名>
cd <项目名>
//安装依赖
npm install
//安装vue-router 
npm install vue-router --save
npm run dev

浮动的vue项目如下图:

在菜单项el-meun-item标签中要丰富index="menu-2-index"属性, 意思便是近来美食指南对应的路由.

风华正茂、使用路由

  1. 率先在目录下开创components文本夹,然后再创设index.vuehello.vue文件
//index.vue
<template>
    <div>
        <h2>Index</h2>
        <hr>
        <p>{{sContent}}</p>
    </div>
</template>
<script>
    export default{
        data(){
            return {
                sContent:"This is index components"
            }
        }
    }
</script>

//hello.vue
<template>
    <div>
        <h2>Hello Vue.js</h2>
        <hr/>
        <p>{{sContent}}</p>
    </div>
</template>
<script>
    export default{
        data(){
            return {
                sContent:"This is hello components"
            }
        }
    }
</script>
  1. 修改main.js文件
//引入并安装vue-router插件
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
//引入index.vue和hello.vue组件
import App from './App.vue';
import index from './components/index.vue';
import hello from './components/hello.vue';
//定义路由
const routes = [
    {path:'/',component:App},
    { path: '/index', component: index },
    { path: '/hello', component: hello }
]
//创建 router 实例,然后传 routes 配置
const router=new VueRouter({
  routes
});
//创建和挂载根实例。通过 router 配置参数注入路由,从而让整个应用都有路由功能
new Vue({
  el:"#app",
  router
});
  1. 修改App.vue
<template>
  <div>
    ![](./assets/logo.png)
    <h1>{{msg}}</h1>
    <ul>
      <router-link to='/index' tag='li'><a href="/index">Index</a></router-link>
      <router-link to='/hello' tag='li'><a href="/hello">Hello</a></router-link>
    </ul>
  </div>
</template>
  1. 修改index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>vue-webpack-simple</title>
  </head>
  <body>
    <div id="app">
        <router-view></router-view>
    </div>
    <script src="/dist/build.js"></script>
  </body>
</html>

诸有此类就能够把渲染出来的页面挂载到那些id为app的div里了。

校订后运转的功力如下:

终极不要忘记记"router-view/router-view". Vue 组件将会被填充的这里.

二、重定向 redirect

const routes = [
    { path: '/', redirect: '/index'},     // 这样进/ 就会跳转到/index
    { path: '/index', component: index }
]

script首要援引的有vue和vue-router甚至element-ui,ajax央浼使用的是axios, 如果反感能够转变为jQuery等.

三、嵌套路由

const routes = [
    { path: '/index', component: index,
        children: [
            { path: 'info', component: {template:'<p>This is info component</p>'}}
        ]
     }
]
!DOCTYPE htmlhtml lang="en" xmlns:th=""head meta charset="UTF-8" link rel="stylesheet" href="-ui/lib/theme-chalk/index.css" titleVue Test/title/headbody div  el-container el-aside width="200px" el-menu :default-openeds="['1']" :default-active="$route.path" @select="handleSelect" el-menu-item index="" template slot="title"i/i菜单1/template /el-menu-item el-menu-item index="/menu-2-index" template slot="title"i/i菜单2/template /el-menu-item el-menu-item index="/menu-3-index" template slot="title"i/i菜单3/template /el-menu-item /el-menu /el-aside el-container router-view/router-view /el-container /el-container /div script src=""/script script src="-router/dist/vue-router.js "/script script src="-ui/lib/index.js"/script script src=""/script script src="./js/util.js"/script script src="./js/route.js"/script script src="./js/main.js"/script/body/html

四、命名路由

const routes = [
    { path: '/index', component: index,
      name:'index'
    }
]
  1. 制造单文件组件

五、<router-link>标签属性

//to属性 string|object
<!-- 字符串 -->
<router-link to="home">Home</router-link>
<!-- 渲染结果 -->
<a href="home">Home</a>

<!-- 使用 v-bind 的 JS 表达式 -->
<router-link v-bind:to="'home'">Home</router-link>
<!-- 同上 -->
<router-link :to="{ path: 'home' }">Home</router-link>

<!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

<!-- 带查询参数,下面的结果为 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

//replace属性 true|false 不留下 history 记录。
<router-link to="home" replace>Home</router-link>

//append属性 true|false 追加路径
<router-link to="home" append >Home</router-link>

//tag属性 string 设置渲染标签
<router-link to="/foo" tag="li">foo</router-link>
<!-- 渲染结果 -->
<li>foo</li>

//active-class 属性 string 激活时使用的 CSS 类名

单文件组件格式与 Vue 官方网站实例意气风发致, HTML片段必需选取template标签包涵.

五、路由新闻目的

  1. $route.path
    字符串,对应当前路由的渠道,总是深入分析为相对路线,如 "/foo/bar"。
  2. $route.params
    四个 key/value 对象,富含了 动态片段 和 全相称片段,若无路由参数,就是二个空对象。
  3. $route.query
    一个 key/value 对象,表示 UCRUISERL 查询参数。比如,对于路径/foo?user=1,则有 $route.query.user == 1,若无查询参数,则是个空对象。
  4. $route.hash
    方今路由的 hash 值 (不带 #State of Qatar ,若无 hash 值,则为空字符串。
  5. $route.fullPath
    形成深入深入分析后的 U812 SuperfastL,饱含查询参数和 hash 的欧洲经济共同体路线。
  6. $route.matched
    三个数组,饱含当前路由的具备嵌套路线片段的 路由记录 。路由记录就是routes 配置数组中的对象别本(还有在 children 数组)。

上述遍是vue-router基本使用方法了
更详实的vue-router作用请参照他事他说加以考查文档:https://router.vuejs.org/zh-cn/

template div  h1Hello Menu 1/h1 h2{{message}}/h2 /div/templatescript exports = { data: function () { return { message: 'Hello Vue!' } } }/scriptstyle #menu1 { font-size: 12px; }/style
  1. 定义路由安顿

零零件的加载使用异步方式,util.loadComponent(urlState of Qatar, 此方法中传唱服务器url, 接受服务器重回的单文件组件, 即HTML片段.

var routes = [{ path: '/menu-1-index', name: 'menu-1-index', component: util.loadComponent('../views/menu1.html')}, { path: '/menu-2-index', name: 'menu-2-index', component: util.loadComponent('./views/menu2.html')}];var router = new VueRouter({ routes: routes});
  1. 定义main.js

在Vue实例中绑定路由, 并完毕handleSelect方法, 用于路由的跳转.

var app = new Vue({ el: '#app', router : router, data: function () { return { activeIndex:1, } }, methods: { handleSelect : function(key, path) { console.log(key, path) this.$router.push(key) } }});

本文由澳门威斯尼人平台登录发布于Web前端,转载请注明出处:在静态页面中使用,router构建单页应用

相关阅读