router路由配置
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
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路由配置的更多相关文章
- vue项目中router路由配置
介绍 路由:控制组件之间的跳转,不会实现请求.不用页面刷新,直接跳转-切换组件>>> 安装 本地环境安装路由插件vue-router: cnpm install vue-rou ...
- vue-route(三)后台管理路由配置
在一个后台管理的项目中,关于路由的配置, 我们需要实现的一个布局是header,aside,main三部分,后期还可能添加footer部分,实现的需求是请求数据时,局部的刷新,这个时候我们就需 ...
- cisco 路由配置
Cisco路由配置基础 刚刚接触cisco路由配置,下面是学习的笔记,感觉命令还是多敲才能熟悉 一. 所处状态各类 router> 用户处于用户命令状态,可以查看网络和主机 router# 用户 ...
- angular2地址栏路由配置
一步一步route过去可以,地址栏直接写url怎么就找不到了呢? 这关乎于Nodejs的express路由规则(http://hm4123660.iteye.com/blog/2195035) exp ...
- 你可以不知道原因,但是,我们不能停止努力。httplook抓取路由配置界面信息
因为实验室的项目要求,需要动态控制路由的配置信息,我们知道.路由选择需要购买的访问后,:http://192.168.1.1 路由配置页面.配置,不须要人手工操作.甚至定时任务配置的时候,就须要进一步 ...
- CCNA网络工程师学习进程(7)路由器的路由配置
前面一节已经介绍了路由器的端口配置,接着我们介绍路由器的路由配置:静态路由.默认路由和浮动路由的配置:动态路由协议的配置,包括RIP.IGRP.EIGRP和OSPF. (1)路由器的基 ...
- Cisco动态路由配置
前言: 学完静态路由配置,该学动态路由.所以 学习完后来做终结. 准备: PC:192.168.1.10 R1:fa0/0 192.168.1.1 fa0/1 1.1.12.1 R2: fa0/0 1 ...
- vue 路由配置
1.不带参数的路由配置 及 跳转 //路由配置: { name: "a", path: "/a", component: a } 页面跳转: this.$r ...
- 如何用vue-router为每个路由配置各自的title
传统方法 以前在单页面路由中,就只能在html文件中定一个固定的网站的title.如果想要动态的去修改,需要使用如下的方法. document.title = '这是一个标题'; 这样会让我们做很多无 ...
随机推荐
- MySQL银行ATM存取款机系统(需求分析)
银行ATM需求文档 一.E-R图形文 二.开发步骤 1.明确需求--数据库设计--编码实现功能--测试 2.绘制e-r图--绘制数据库模型图--使用三大方式规范数据库结构 三.开发思路 1. 模型图综 ...
- codeforces Gym - 101485 D Debugging (2015-2016 Northwestern European Regional Contest (NWERC 2015))
题目描述: 点击打开链接 这题题意其实很不好理解,你有一个n行的程序,现在程序运行了r时间之后停止了运行,证明此处有一个bug,现在你需要在程序中加printf来调试找到bug所在的位置,你每次加一个 ...
- vue2.0 axios前后端数据处理
目前主流的 Vue 项目,都选择 axios 来完成 ajax 请求,而大型项目都会使用 Vuex 来管理数据. 前言: 使用 cnpm 安装 axios cnpm install axios -S ...
- vue2.0+mint-ui资讯类顶导航和内容页联动实例(不是很完美)
<template> <div> <div class="navbox"> <div class="nav"> ...
- Node.js NPM Tutorial
Node.js NPM Tutorial – How to Get Started with NPM? NPM is the core of any application that is devel ...
- Spring Boot 教程 (4) - swagger-ui
Spring Boot 教程 - swagger-ui 1. 什么是Swagger? Swagger™的目标是为REST APIs 定义一个标准的,与语言无关的接口,使人和计算机在看不到源码或者看不到 ...
- SpringBoot2.1电商通用(微信+支付宝)支付系统实战
『课程目录』: ├─第10章 全模块电商系统之商品模块 │ 10-1_商品列表-上.mp4 │ 10-2_商品列表-中.mp4 │ 10-3_商品列表-下.mp4 │ ...
- Java并发编程volatile关键字
volatile理解 Java语言是支持多线程的,为了解决线程并发的问题,在语言内部引入了 同步块 和volatile 关键字机制.volatile具有synchronized关键字的“可见性”,vo ...
- scipy.sparse的一些整理
一.scipy.sparse中七种稀疏矩阵类型 1.bsr_matrix:分块压缩稀疏行格式 介绍 BSR矩阵中的inptr列表的第i个元素与i+1个元素是储存第i行的数据的列索引以及数据的区间索引, ...
- C#中的List基础用法汇总
List类是ArrayList类的泛型等效类,该类使用大小可按需动态增加的数组实现IList泛型接口. 泛型的好处:它为使用c#语言编写面向对象程序增加了极大的效力和灵活性.不会强行对值类型进行装箱和 ...