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. sourcetree 拉取 一直让输入密码

    以下方法都没用 在控制台中 git gc git prune git config --global credential.helper store git pull 输入账号密码 git pull ...

  2. IE8/IE9/IE10打开网页后,自动设置浏览器模式为“IE8/IE9/IE10兼容性视图”

    http://blog.snsgou.com/post-16.html 作者:SNSGOU 发布于:2013-07-17 22:23:05  分类:CSS/HTML     评论(0)  浏览(132 ...

  3. DP+容斥 BZOJ1042

    1042: [HAOI2008]硬币购物 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 2558  Solved: 1539[Submit][Stat ...

  4. POJ1905

    题目链接:http://poj.org/problem?id=1905 题目大意: 竹竿受热会膨胀.设其原长为 L ,受热膨胀后的长度 L'=(1+n*C)*L ,其中 n, C, L都是要输入的参数 ...

  5. .Net基础之1——学前入门

    1..Net平台 2.C#编程语言 3..Net都能做什么 Winform桌面应用程序.Internet应用程序——ASP.Net(京东.淘宝.携程网)(主推). WP8手机开发.Unity 3D游戏 ...

  6. flatbuffer介绍和用法

    介绍 flatbuffer是google发布的一个跨平台序列化框架具有如下特点 1.对序列化的数据不需要打包和拆包 2.内存和效率速度高,扩展灵活 3.代码依赖较少 4.强类型设计,编译期即可完成类型 ...

  7. vue滑动位移动画

    需要用到css3,vue过度 在网上找了很久很少的资料,自己摸索了一会看了官方文档,毕竟环境不同,需要的效果不同,耽误了很久 鼠标放上某一个就会从下方弹出层

  8. Istio DestinationRule 目标规则

    概念及示例 与VirtualService一样,DestinationRule也是 Istio 流量路由功能的关键部分.您可以将虚拟服务视为将流量如何路由到给定目标地址,然后使用目标规则来配置该目标的 ...

  9. 基于Hadoop不同版本搭建hive集群(附配置文件)

    本教程采用了两种方案 一种是hive-1.21版本,hadoop版本为hadoop2.6.5 还有一种是主要讲基于hadoop3.x hive的搭建 先来第一种 一.本地方式(内嵌derby) 步骤 ...

  10. [SD心灵鸡汤]006.每月一则 - 2015.10

    1. 贫不足羞,可羞是贫而无志. 2. 艺术的大道上荆棘丛生,这也是好事,常人望而却步,只有意志坚强的人例外. 3. 古今中外,凡成就事业,对人类有作为的无一不是脚踏实地.艰苦攀登的结果. 4. 理想 ...