vue项目中router路由配置

 

介绍

路由:控制组件之间的跳转,不会实现请求、不用页面刷新,直接跳转-切换组件》》》

安装

本地环境安装路由插件vue-router:    cnpm install vue-router --save-dev

*没有安装淘宝镜像的可以将 cnpm 替换成 npm

想要安装的可以看这篇文章http://www.cnblogs.com/padding1015/p/7162024.html,(打开搜索  镜像  即可跳转到对应位置)

配置

两种配置方法:在main.js中 || 在src/router文件夹下的index.js中

这里只说在src/router/index.js中的

  1. 引入:
1
2
3
import Vue from 'vue'
 
import Router from 'vue-router'

注意这个Router是自定义的名字,这里叫这个名字后,下边都要用到的

  2. 使用/注册:

1
Vue.use(Router)

  3. 配置

配置路由:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
export default new Router({
  routes: [
   {
        path : ‘/’,  //到时候地址栏会显示的路径
        name : ‘Home’,
        component :  Home   // Home是组件的名字,这个路由对应跳转到的组件。。注意component没有加“s”.
    },
    {
        path : ‘/content’,
        name : ‘Content’,
        component :  Content
    }
],
    mode: "history"
})

  4. 引入路由对应的组件地址:

1
2
3
import Home from '@/components/Home'
 
import Home from '@/components/Content’

  5. 在main.js中调用index.js的配置:

1
import router from './router'

  6. App.vue页面使用(展示)路由:<!-- 展示router -->

把这个标签放到对应位置:

1
<router-view></router-view>

  7. 路由切换(原来的<a href=”XXX.html”>等地方):把切换标签和链接改成:

1
2
3
<router-link  to="/">切换到Home组件</router-link>
 
<router-link  to="/content">切换到Content组件</router-link>

router路由配置的更多相关文章

  1. vue项目中router路由配置

    介绍 路由:控制组件之间的跳转,不会实现请求.不用页面刷新,直接跳转-切换组件>>> 安装 本地环境安装路由插件vue-router:    cnpm install vue-rou ...

  2. vue-route(三)后台管理路由配置

    在一个后台管理的项目中,关于路由的配置,     我们需要实现的一个布局是header,aside,main三部分,后期还可能添加footer部分,实现的需求是请求数据时,局部的刷新,这个时候我们就需 ...

  3. cisco 路由配置

    Cisco路由配置基础 刚刚接触cisco路由配置,下面是学习的笔记,感觉命令还是多敲才能熟悉 一. 所处状态各类 router> 用户处于用户命令状态,可以查看网络和主机 router# 用户 ...

  4. angular2地址栏路由配置

    一步一步route过去可以,地址栏直接写url怎么就找不到了呢? 这关乎于Nodejs的express路由规则(http://hm4123660.iteye.com/blog/2195035) exp ...

  5. 你可以不知道原因,但是,我们不能停止努力。httplook抓取路由配置界面信息

    因为实验室的项目要求,需要动态控制路由的配置信息,我们知道.路由选择需要购买的访问后,:http://192.168.1.1 路由配置页面.配置,不须要人手工操作.甚至定时任务配置的时候,就须要进一步 ...

  6. CCNA网络工程师学习进程(7)路由器的路由配置

        前面一节已经介绍了路由器的端口配置,接着我们介绍路由器的路由配置:静态路由.默认路由和浮动路由的配置:动态路由协议的配置,包括RIP.IGRP.EIGRP和OSPF.     (1)路由器的基 ...

  7. Cisco动态路由配置

    前言: 学完静态路由配置,该学动态路由.所以 学习完后来做终结. 准备: PC:192.168.1.10 R1:fa0/0 192.168.1.1 fa0/1 1.1.12.1 R2: fa0/0 1 ...

  8. vue 路由配置

    1.不带参数的路由配置 及 跳转 //路由配置: { name: "a", path: "/a", component: a }   页面跳转: this.$r ...

  9. 如何用vue-router为每个路由配置各自的title

    传统方法 以前在单页面路由中,就只能在html文件中定一个固定的网站的title.如果想要动态的去修改,需要使用如下的方法. document.title = '这是一个标题'; 这样会让我们做很多无 ...

随机推荐

  1. MySQL银行ATM存取款机系统(需求分析)

    银行ATM需求文档 一.E-R图形文 二.开发步骤 1.明确需求--数据库设计--编码实现功能--测试 2.绘制e-r图--绘制数据库模型图--使用三大方式规范数据库结构 三.开发思路 1. 模型图综 ...

  2. codeforces Gym - 101485 D Debugging (2015-2016 Northwestern European Regional Contest (NWERC 2015))

    题目描述: 点击打开链接 这题题意其实很不好理解,你有一个n行的程序,现在程序运行了r时间之后停止了运行,证明此处有一个bug,现在你需要在程序中加printf来调试找到bug所在的位置,你每次加一个 ...

  3. vue2.0 axios前后端数据处理

    目前主流的 Vue 项目,都选择 axios 来完成 ajax 请求,而大型项目都会使用 Vuex 来管理数据. 前言: 使用 cnpm 安装 axios cnpm install axios -S ...

  4. vue2.0+mint-ui资讯类顶导航和内容页联动实例(不是很完美)

    <template> <div> <div class="navbox"> <div class="nav"> ...

  5. Node.js NPM Tutorial

    Node.js NPM Tutorial – How to Get Started with NPM? NPM is the core of any application that is devel ...

  6. Spring Boot 教程 (4) - swagger-ui

    Spring Boot 教程 - swagger-ui 1. 什么是Swagger? Swagger™的目标是为REST APIs 定义一个标准的,与语言无关的接口,使人和计算机在看不到源码或者看不到 ...

  7. SpringBoot2.1电商通用(微信+支付宝)支付系统实战

    『课程目录』: ├─第10章 全模块电商系统之商品模块 │      10-1_商品列表-上.mp4 │      10-2_商品列表-中.mp4 │      10-3_商品列表-下.mp4 │  ...

  8. Java并发编程volatile关键字

    volatile理解 Java语言是支持多线程的,为了解决线程并发的问题,在语言内部引入了 同步块 和volatile 关键字机制.volatile具有synchronized关键字的“可见性”,vo ...

  9. scipy.sparse的一些整理

    一.scipy.sparse中七种稀疏矩阵类型 1.bsr_matrix:分块压缩稀疏行格式 介绍 BSR矩阵中的inptr列表的第i个元素与i+1个元素是储存第i行的数据的列索引以及数据的区间索引, ...

  10. C#中的List基础用法汇总

    List类是ArrayList类的泛型等效类,该类使用大小可按需动态增加的数组实现IList泛型接口. 泛型的好处:它为使用c#语言编写面向对象程序增加了极大的效力和灵活性.不会强行对值类型进行装箱和 ...