Vue.js系列之vue-router(上)(3)

说明:

我们项目现在用的是:vue2.0 + vue-cli + webpack + vue-router2.0 + vue-resource1.0.3

如果大家在实践的过程中与本文所说的内容有较大区别的话看看是不是版本问题。

本文是一系列文章,在我对Vue有了更深刻的理解认识之后会对文章及时进行修改或更正。欢迎大家批评指出错误。以下是已完成的文章列表。

1.Vue.js系列之项目搭建(1)

2.Vue.js系列之项目结构说明(2)

概述

Vue非常适用于实践单页面应用程序也就是平时大家说的比较多的SPA(single page application),这点应该了解过Vue的应该都知道吧。一般的单页面应用是基于路由或页面之间的链接来形成的,Vue是基于路由和组件的,所以我们今天就来了解下vue-router。vue-router是Vue.js官方的路由插件,它和vue.js深度集成,用于设定访问路径,并将路径和组件映射起来,我们给每个组件一个路由地址,跳转路由相当于组件切换。vue-router的内容还是比较多的,这里我只分享我自己项目中用到的地方,其他地方大家可以看文档啦。

vue-router官网:http://router.vuejs.org/zh-cn/(中)

英文官网你知道啦,直接去掉后面的"zh-cn/"就好了。

开始使用vue-router

这里我假设大家之前都用模块工程的方式实践了一个vue Demo,在此基础上我们添加vue-router。

1.安装

npm install vue-router 

2.在项目main.js中安装路由插件

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter) 

3.在组件中使用路由

先看下路由跳转的效果吧,大家注意看地址栏变化哈。

下面这个tabBar就是一个组件(偷偷告诉你,在微信小程序中,这个功能直接配置app.json文件就好了)

每个tab点击时路由地址会相应变化,其实是渲染相应的组件,具体我们来看代码。

footer.vue组件

<template>
  <div class="footer">
    <div class="readType" v-if="readType.count">{{readType.count}}</div>
    <ul class="main-nav">
      <li>
        <router-link to="/home">
          <i class="icon-nav icon-nav1"></i><span>首页</span>
        </router-link>
      </li>
      <li>
        <router-link to="/quan" v-bind:class="{rrouter:activ}">
          <i class="icon-nav icon-nav2"></i><span>学友圈</span>
        </router-link>
      </li>
      <li>
        <router-link to="/friend">
          <i class="icon-nav icon-nav3"></i><span>学友</span>
        </router-link>
      </li>
      <li>
        <router-link to="/find">
          <i class="icon-nav icon-nav4"></i><span>发现</span>
        </router-link>
      </li>
      <li>
        <router-link to="/mine">
          <i class="icon-nav icon-nav5"></i><span>我的</span>
        </router-link>
      </li>
    </ul>
  </div>
</template> 

这里有几点需要知道:

1.使用 router-link 组件来导航.

2.通过传入 `to` 属性指定链接.

3.<router-link> 默认会被渲染成一个 `<a>` 标签

路由出口

我们前面说了,路由跳转就是相应组件在渲染,那么渲染的内容是怎么显示也页面中的呢,那就是路由出口'<router-view></router-view>'做的事了,路由匹配到的组件将渲染在这里。

路由出口我们可以设置在当前组件中也可以设置在其他组件中,项目中我们就将所有组件都渲染在最大的容器App.vue组件中(我们项目中App组件只作为渲染容器)。

<template>
 <div id="app">
  <router-view></router-view>
 </div>
</template> 

JavaScript

定义路由文件可以直接写在main.js文件中,也可以新建一个js文件,因为我们的组件比较多,所以单独把路由拿出来写了一个router.js文件。

// 0. 如果使用模块化机制编程,进入Vue和VueRouter,要调用 Vue.use(VueRouter)
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
// 1. 定义(路由)组件。
// 可以从其他文件 import 进来,我们一般都是建好了组件再来写路由的
// 所以就会有好多这样的语句。
import home form "./components/home"
import login form "./components/login"
// 2. 定义路由
 routes: [ //这里跟1.x有挺大区别,有接触的自己看清楚哦
  {
   path: '/',  //浏览器网路请求走通之后默认就会去找域名下的根目录,
   name: 'home', //所以我们就把这个组件作为默认首页
   component: home
  },
  {
   path: '/login',
   name: 'login',
   component: login
  }
  ]
// 3. 创建 router 实例,然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({   //你就当const是var
 routes
//(缩写)相当于 routes: routes
})
// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由,
// 从而让整个应用都有路由功能
const app = new Vue({
 router
}).$mount('#app')
// 现在,应用已经启动了! 

总结

上篇先分享到这里,主要了解了有以下几点:

1.vue-router的安装和使用

2.在组件模板中的书写格式

3.知道了路由出口

4.如何定义一个路由

5.创建路由实例和挂载实例

下篇我将给大家继续分享路由的其他用法(项目中用到的):

1.如何实现当前页激活,tab标签同时也激活,即active-class

2.路由跳转时添加过渡动效

3.路由传参及命名路由

4.实现资源懒加载

5.编程式导航

6.router-link的其他表现形式

7.Router构造详细配置

内容有点多,可能还要再分细一点,写详细点。但还是想把自己遇到过的问题,用到的知识点通过自己的理解分享出来。

以上所述是小编给大家介绍的Vue.js系列之vue-router(上)(3),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • 详解使用vue-router进行页面切换时滚动条位置与滚动监听事件

    按照正常的产品逻辑,我们在进行页面切换时滚动条应该是在页面顶部的,可是...在使用vue-router进行页面切换时,发现滚动条所处的位置被自动记录了下来,且在另一个组件内定义的滚动监听事件仍会运行,着实吃了一大惊... 说说我的破解方法: 1.在每个需要用vue-router切换的组件的mounted钩子内将页面的位置自动回滚到页面顶部,解决滚动条位置自动记录问题: 2.在每个组件内定义一条变量scrollWatch默认为true,在绑定滚动监听事件时加个if判断,只有在scrollWatch

  • Vue.js路由组件vue-router使用方法详解

    使用Vue.js + vue-router 创建单页应用是非常简单的.只需要配置组件和路由映射,然后告诉 vue-router 在哪里渲染即可. 一.普通方式基本例子: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue-router使用方法</title> </head> <bod

  • vue-router:嵌套路由的使用方法

    模板抽离 我们已经学习过了Vue模板的另外定义形式,使用<template></template>. <!-- 模板抽离出来 --> <template id="home"> <div>首页</div> </template> <template id="news"> <div>新闻</div> </template> 然后js里定义路

  • Vue系列:通过vue-router如何传递参数示例

    使用vue-router 来实现webapp的页面跳转,有时候需要传递参数,做法如下: 参考文献:http://router.vuejs.org/en/named.html 主要有以下几个步骤: (1) 设置好路由配置 router.map({ '/history/:deviceId/:dataId': { name: 'history', // give the route a name component: { ... } } }) 这里有2个关键点: a)给该路由命名,也就是上文中的 na

  • VueJs路由跳转——vue-router的使用详解

    对于单页应用,官方提供了vue-router进行路由跳转的处理,本篇主要也是基于其官方文档写作而成. 安装 基于传统,我更喜欢采用npm包的形式进行安装. npm install vue-router --save 当然,官方采用了多种方式进行安装,包括bower,cdn等. 基本用法 在HTML文档中使用,只需要利用v-link这个directive就行了,如: <a v-link="{path: '/view-a'}">Go to view-a</a> ​p

  • Vue-Router实现页面正在加载特效方法示例

    前言 vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的页面应用,是用一些超链接来实现页面切换和跳转的.在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换. 如果你在使用 Vue.js 和 Vue-Router 开发单页面应用.因为每个页面都是一个 Vue 组件,你需要从服务器端请求数据,然后再让 Vue 引擎来渲染到页面上. 例如

  • Vue.js实战之利用vue-router实现跳转页面

    前言 使用 Vue.js 做项目的时候,一个页面是由多个组件构成的,所以在跳转页面的时候,并不适合用传统的 href,于是 vue-router 应运而生. 官方文档: https://router.vuejs.org/zh-cn/essentials/getting-started.html 这次的实例主要实现下图的效果: 项目结构: 一.配置 Router 用 vue-cli 创建的初始模板里面,并没有 vue-router,需要通过 npm 安装 cnpm i vue-router -D

  • vue-router 学习快速入门

    vue-router 快速入门 配置路由 $ npm install vue-router --save routes.js import Home from './pages/Home.vue' import Gifs from './pages/Gifs.vue' import User from './pages/User.vue' export const routes = [ { path: '', component: Home }, { path: '/gifs', compone

  • vue-router跳转页面的方法

    使用 Vue.js 做项目的时候,一个页面是由多个组件构成的,所以在跳转页面的时候,并不适合用传统的 href,于是 vue-router 应运而生 官方文档请点击这里 ## vue-router 第一步当然是安装了,用npm安装命令 npm install vue-router --save-dev 第二步在.vue组件里添加标签,格式如下 <div id="app"> <p> <!-- 使用 router-link 组件来导航. --> <

  • Vue.js第二天学习笔记(vue-router)

    vue中vue-router的使用: main.js如何配置(es6的写法):在引用之前记得先   npm 下所需要的vue import Vue from 'vue' import App from './App.vue' import Router from 'vue-router' import Resource from 'vue-resource' //import VueTouch from 'vue-touch' var VueTouch = require('vue-touch'

随机推荐