vue-router是一个插件包,所以我们还是需要用npm/cnpm来进行安装的:npm/cnpm install vue-router --save-dev。

在路由的核心文件:src/router/index.js分析:

import Vue from 'vue'   //引入Vue
import Router from 'vue-router' //引入vue-router
import Hello from '@/components/Hello' //引入根目录下的Hello.vue组件 Vue.use(Router) //Vue全局使用Router export default new Router({
routes: [ //配置路由,这里是个数组
{ //每一个链接都是一个对象
path: '/', //链接路径
name: 'Hello', //路由名称,
component: Hello //对应的组件模板
}
]
})

router-link制作导航:
导航链接,我们只要点击就可以实现页面内容的变化。制作链接需要<router-link>标签,我们先来看一下它的语法。

<router-link to="/">[显示字段]</router-link>

to:是我们的导航路径,要填写的是你在router/index.js文件里配置的path值,如果要导航到默认首页,只需要写成 to=”/” ,
[显示字段] :就是我们要显示给用户的导航名称,比如首页 新闻页 产品页等等。

子路由的写法是在原有的路由配置下加入children字段。

children:[
  {path:'/',component:xxx},
  {path:'xx',component:xxx},
]

children字段后边跟的是个数组,数组里和其他配置路由基本相同,需要配置path和component。(在配置路由文件前,需要先用import引入相应组件)

路由传参方式一在路由文件src/router/index.js里配置name属性。

routes: [
  {
    path: '/',
    name: 'Hello',
    component: Hello
  }
]
模板里(src/App.vue)用$router.name的形势接收,比如直接在模板中显示:

<p>{{ $route.name}}</p>

路由传参方式二通过<router-link> 标签中的to传参。

<router-link :to="{name:xxx,params:{key:value}}">valueString</router-link>

这里的to前边是带冒号的,然后后边跟的是一个对象形势的字符串.

name:就是我们在路由配置文件中起的name值。
params:就是我们要传的参数,它也是对象形势,在对象里可以传递多个值。

单页面多路由区域操作:在一个页面里我们有2个以上<router-view>区域,我们通过配置路由的js文件,来操作这些区域的内容。

vue-router 利用url传递参数:

 :冒号的形式传递参数
我们可以在理由配置文件里以:冒号的形式传递参数,这就是对参数的绑定。
在配置文件里以冒号的形式设置参数。我们在src/router/index.js文件里配置路由。
{
    path:'/params/:newsId/:newsTitle',
     component:Params
<router-link to="/params/1222444/nihao">params</router-link> |
<template>
<div>
<h2>{{ msg }}</h2>
<p>新闻ID:{{ $route.params.newsId}}</p>
<p>新闻标题:{{ $route.params.newsTitle}}</p>
</div>
</template> <script>
export default {
name: 'params',
data () {
return {
msg: 'hellow vue-router'
}
}
}
</script>
path:'/params/:newsId(\\d+)/:newsTitle',

加入正则需要在路由配置文件里(/src/router/index.js)以圆括号的形式加入。

重定向时传递参数:只需要在redirect后边的参数里复制重定向路径的path参数就可以。

{
path:'/params/:newsId(\\d+)/:newsTitle',
component:Params
},{
path:'/goParams/:newsId(\\d+)/:newsTitle',
redirect:'/params/:newsId(\\d+)/:newsTitle'
}

alias别名的使用:

 使用redirect进行重定向了。使用alias别名的形式,我们也可以实现类似重定向的效果。
{
    path: '/hi1',
    component: Hi1,
    alias:'/task'
 }
2.配置我们的<router-link>,起过别名之后,可以直接使用<router-link>标签里的to属性,进行重新定向。
<router-link to="/task">gogo</router-link>

redirect和alias的区别
redirect:仔细观察URL,redirect是直接改变了url的值,把url变成了真实的path路径。
alias:URL路径没有别改变,这种情况更友好,让用户知道自己访问的路径,只是改变了<router-view>中的内容。

注意:别名请不要用在path为’/’中,如下代码的别名是不起作用的。

{
  path: '/',
  component: Hello,
  alias:'/home'
}

Vue 路由知识二(工程模式下路由的配置)的更多相关文章

  1. Vue 路由知识三(过渡动画及路由钩子函数)

    路由的过渡动画:让路由有过渡动画,需要在<router-view>标签的外部添加<transition>标签,标签还需要一个name属性. <transition nam ...

  2. history路由模式下的nginx配置

    路由模式 众所周知,浏览器下的单页面应用的路由模式有下面两种: hash 模式和 history 模式.hash 模式通用性好,而且不依赖服务器的配置,省心省力,但是缺点是不够优雅.相比于 hash ...

  3. 基于 Vue.js 之 iView UI 框架非工程化实践记要 使用 Newtonsoft.Json 操作 JSON 字符串 基于.net core实现项目自动编译、并生成nuget包 webpack + vue 在dev和production模式下的小小区别 这样入门asp.net core 之 静态文件 这样入门asp.net core,如何

    基于 Vue.js 之 iView UI 框架非工程化实践记要   像我们平日里做惯了 Java 或者 .NET 这种后端程序员,对于前端的认识还常常停留在 jQuery 时代,包括其插件在需要时就引 ...

  4. webpack + vue 在dev和production模式下的小小区别

    上周的某一天,和一位同样是前端技术极度爱好的开发者朋友聊天,他在提出了一个问题,他写的vue程序为什么在dev模式运行良好,而在production模式就直接报错了.这让我感到惊讶,还有这么神奇的事情 ...

  5. 066——VUE中vue-router之rewrite模式下配置404页面

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 前端知识(二)08-Vue.js的路由-谷粒学院

    目录 一.锚点的概念 二.路由的作用 三.路由实例 1.复制js资源 2.创建 路由.html 3.引入js 4.编写html 5.编写js 一.锚点的概念 案例:百度百科 特点:单页Web应用,预先 ...

  7. WPF MVVM模式下路由事件

    一,路由事件下三种路由策略: 1 冒泡:由事件源向上传递一直到根元素.2直接:只有事件源才有机会响应事件.3隧道:从元素树的根部调用事件处理程序并依次向下深入直到事件源.一般情况下,WPF提供的输入事 ...

  8. ensp的基础路由命令,接口,下一跳的配置,入门必备

    关于ensp入门事情,第一件事当是安装必备三件套:而后,应该是接触路由和PC机了,最烦人满屏代码,眼花缭乱: 今天写一篇零基础接触ensp的首次操作,PC-路由-路由-PC的互通实验: 实验要拉出两台 ...

  9. 1_NAT模式和桥接模式下的网络配置

    相信当你看到这篇文章时,你一定对linux的桥接模式和NAT模式有所了解,所以你应该是能看懂这篇文件的,希望对你有所帮助,figthing    ! 一.桥接模式:虚拟机和主机是连在同一个路由下的. ...

随机推荐

  1. UVA 437 The Tower of Babylon巴比伦塔

    题意:有n(n≤30)种立方体,每种有无穷多个.要求选一些立方体摞成一根尽量高的柱子(可以自行选择哪一条边作为高),使得每个立方体的底面长宽分别严格小于它下方立方体的底面长宽. 评测地址:http:/ ...

  2. C项目实践--贪吃蛇(2)

    12.按键处理 函数名称:key_down 函数功能:按键处理函数,主要包括:1.刚开始或结束时的按键处理,游戏开始时,按任意键进入游戏,游戏运行过程中按回车键是游戏的暂停或开始的切换键:2.游戏运行 ...

  3. 【转】 Android Studio --“Cannot resolve symbol” 解决办法

    Android Studio 无法识别同一个 package 里的其他类,将其显示为红色,但是 compile 没有问题.鼠标放上去后显示 “Cannot resolve symbol XXX”,重启 ...

  4. android NDK 使用(多个)静态库生成动态库

    android NDK 使用(多个)静态库生成动态库. 1.编写Android.mk文件:如下两种方式都可以,用于NDK编译工具生成的两个.a文件来生成最终的libtwolib-second.so动态 ...

  5. javaweb项目数据库中数据乱码

    javaweb项目数据库中数据乱码 first: 排查原因: 打断点,查看到底是在执行存数据库操作之前就已经乱码了,还是存数据库操作后乱码的. 前者解决方案: 在web.xml里面加上: <fi ...

  6. 烹调方案 (DP)

    传送门 一道非常好的DP.看这个可能会觉得与01背包很像,不过这个的问题在于现做的菜肴会影响到后面的菜肴的价值. 我们在进行01背包DP时,一件物品的价值是不随着其被枚举的位置改变而改变的,但是这道题 ...

  7. ConfigParser模块用法

    ConfigParser 是Python自带的模块, 用来读写配置文件, 用法及其简单. 直接上代码,不解释,不多说. 配置文件的格式是: []包含的叫section,    section 下有op ...

  8. Vijos P1951 玄武密码 (AC自动机)

    描述 在美丽的玄武湖畔,鸡鸣寺边,鸡笼山前,有一块富饶而秀美的土地,人们唤作进香河.相传一日,一缕紫气从天而至,只一瞬间便消失在了进香河中.老人们说,这是玄武神灵将天书藏匿在此. 很多年后,人们终于在 ...

  9. E20180128-hm

    paradigm  n. 范例,样式,模范; 词形变化表; outlet  n. 出口,出路; 批发商店; 排水口,通风口; 发泄(情感)的方法;

  10. 我的周记5——"侵略如火,不动如山"

    这周发生的事儿 最近同事晋升的参加答辩,还有的同事要转岗走了.难受... 有时候自己常常想,我是不是应该也要走了. 这儿的人好优秀呀,又舍不得离开.但是这里太安逸了,接触不到技术,靠自学呢 又感觉力不 ...