Vue.js系列之vue-router(上) (转载自向朔1992)

概述

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

开始使用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)  

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 from "./components/home"
import login from "./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.创建路由实例和挂载实例

时间: 2024-10-11 03:51:39

Vue.js系列之vue-router(上) (转载自向朔1992)的相关文章

前端框架vue.js系列(9):Vue.extend、Vue.component与new Vue

前端框架vue.js系列(9):Vue.extend.Vue.component与new Vue 本文链接:https://blog.csdn.net/zeping891103/article/details/78133622 vue构造.vue组件和vue实例这三个是不同的概念,它们的关系有点类似于Java的继承概念: 关系:vue构造->vue组件->vue实例 也就是说不同的vue组件可以共用同一个vue构造,不同的vue实例可以共用同一个vue组件.在大型项目中,用过java开发的都知

Vue.js的组件化思想--上

Vue.js的组件化思想--上 一.Vue中的组件 Vue视图层的灵魂 -  组件化 组件(Component)是 Vue.js 最强大的功能之一: 组件可以扩展 HTML 元素,封装可重用的代码: 在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 二.全局组件的创建和注册  全局组件-步骤:1.创建组件Vue.extend(),指定组件的名称--2.注册组件Vue.component()--3.

Vue.js 系列教程 5:动画

原文:intro-to-vue-5-animations 译者:nzbin 译者的话:经过两周的努力,终于完成了这个系列的翻译,由于时间因素及个人水平有限,并没有详细的校对,其中仍然有很多不易理解的地方.我和原作者的初衷一样,希望大家能够通过这个系列文章有所收获,至少可以增加学习的乐趣,我也在学习的路上,所学心得必将与大家共勉. 这是 JavaScript 框架 Vue.js 五篇教程的第五部分.在这个系列的最后一部分,我们将学习动画(如果你了解我,你知道这一章迟早会来).这不是一个完整的指南,

Vue.js 系列教程 3:Vue

原文:intro-to-vue-3-vue-cli-lifecycle-hooks 译者:nzbin 这是 JavaScript 框架 Vue.js 五篇教程的第三部分.在这一部分,我们将学习 Vue-cli ,还会涉及真实的开发流程.这个系列教程并不是一个完整的用户手册,而是通过基础知识让你快速了解 Vuejs 以及它的用途. 系列文章: 渲染, 指令, 事件 组件, Props, Slots Vue-cli (你在这!) Vuex 动画 Vue-cli 和构建过程 如果你还没有读过上一部分关

Vue.js 系列教程 4:Vuex

原文:intro-to-vue-4-vuex 译者:nzbin 这是关于 JavaScript 框架 Vue.js 五个教程的第四部分.在这一部分,我们会学习使用 Vuex 进行状态管理.这个系列教程并不是一个完整的用户手册,而是通过基础知识让你快速了解 Vuejs 以及它的用途. 系列文章: 渲染, 指令, 事件 组件, Props, Slots Vue-cli Vuex (你在这!) Animations Vuex 如果你错过了关于组件及 Vue-cli 的部分,在阅读本篇文章之前应该先读读

Vue.js系列之一初识Vue

在看vue.js之前,可以先看这两篇文章,对于为什么要使用vue会有一定帮助 1.Vue.js !important 2.界面之下:还原真实的MV*模式 !important 3.web前端优化之reflow(减少页面的回流) 4.深度剖析:如何实现一个 Virtual DOM 算法 本系列文章是基于官方文档,整理的,旨在让新手快速上手.学习vue.js需要一定基础. 一.声明式渲染 1.实现Hello World的功能 还是熟悉的Hello World,下面用Vue.js的声明式渲染来实现 <

如何对第一个Vue.js组件进行单元测试 (上)

首先,为什么要单元测试组件? 单元测试是持续集成的关键.通过专注于小的.独立的实体,确保单元测试始终按预期运行,使代码更加可靠,你可以放心地迭代你的项目而不必担坏事儿. 单元测试不仅限于脚本.可以独立测试的任何东西都是可单元测试的,只要你遵循一些好的做法.这些实例包括单一责任.可预测性和松散耦合. 作为我们应用程序的可重用实体,Vue.js组件是单元测试的理想选择.我们将用不同的输入和交互测试做好的单个单元,并确保它始终按照我们的预期运行. 在开始之前 Vue CLI 3发布了.Vue Test

vue.js 中slot 用处大(转载)

什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. Slot分发内容 ①概述: 简单来说,假如父组件需要在子组件内放一些DOM,那么这些DOM是显示.不显示.在哪个地方显示.如何显示,就是slot分发负责的活. ②默认情况下 父组件在子组件内套的内容,是不显示的. 例如代码: <

Vue.js 系列教程 2:组件,Props,Slots

原文:intro-to-vue-2-components-props-slots 译者:nzbin 这是关于 JavaScript 框架 Vue.js 五个教程的第二部分.在这一部分,我们将学习组件,Props 以及 Slots.这个系列教程并不是一个完整的用户手册,而是通过基础知识让你快速了解 Vuejs 以及它的用途. 系列文章: 渲染, 指令, 事件 组件, Props, Slots (你在这!) Vue-cli Vuex 动画 组件和传递数据 如果你熟悉 React 或者 Angular